猫王精选电台 添加表单校验功能

src/views/music/choiceness/detail.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="app-container">
-    <el-form label-width="100px" style="width: 500px" :disabled="disabled">
-      <el-form-item label="电台名称：">
-        <el-input v-model="form.name" placeholder="请输入电台名称" />
+    <el-form :model="form" ref="form" :rules="rules" label-width="100px" style="width: 500px"
+      :disabled="disabled">
+      <el-form-item label="电台名称：" prop="name">
+        <el-input v-model="form.name" placeholder="请输入电台名称" maxlength="100" show-word-limit />
       </el-form-item>
-      <el-form-item label="电台简介：">
+      <el-form-item label="电台简介：" prop="description">
         <el-input v-model="form.description" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"
-          placeholder="请输入电台简介" />
+          placeholder="请输入电台简介" maxlength="300" show-word-limit />
       </el-form-item>
-      <el-form-item label="电台封面：">
+      <el-form-item label="电台封面：" prop="thumb">
         <Upload listType="picture-card" :url="form.thumb" @upload="upload" :disabled="disabled" />
       </el-form-item>
-      <el-form-item label="直播流：" style="width:1200px">
+      <el-form-item label="直播流：" style="width:1200px" prop="liveBrocastList">
         <el-button type="primary" icon="el-icon-plus" @click="getDialog">添加关联</el-button>
         <el-table :data="form.liveBrocastList">
           <el-table-column type="index" label="序号" align="center" />
@@ -175,7 +176,22 @@ export default {
       // 只读
       disabled: false,
       // 阻止重复点击
-      index: null
+      index: null,
+      // 校验
+      rules: {
+        name: [{
+          required: true, message: '请输入电台名称', trigger: 'blur'
+        }],
+        description: [{
+          required: true, message: '请输入电台简介', trigger: 'blur'
+        }],
+        thumb: [{
+          required: true, message: '请上传电台封面', trigger: 'change'
+        }],
+        liveBrocastList: [{
+          required: true, message: '请配置电台直播流', trigger: 'change'
+        }]
+      }
     }
   },
   watch: {
@@ -297,10 +313,16 @@ export default {
 
     // 提交
     getSubmit() {
-      submit(this.form).then(res => {
-        if (res.code === 0) {
-          this.$message.success('提交成功！')
-          this.form.id ? this.getDetail() : this.cancel()
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          submit(this.form).then(res => {
+            if (res.code === 0) {
+              this.$message.success('提交成功！')
+              this.form.id ? this.getDetail() : this.cancel()
+            }
+          })
+        } else {
+          return false
         }
       })
     },