el-cascader、多级嵌套、引用组件等表单验证

el-cascader级联选择器验证

type: ‘array’

<el-form ref="form" :model="form" :rules="rules">
 <el-form-item label="多级联动：" prop="cascader">
    <el-cascader filterable :show-all-levels="false" :options="option" placeholder="可搜索多选" v-model="form.cascader" :props="{ multiple: true, emitPath: false}">
    </el-cascader>
  </el-form-item>
</el-form>

<script>
export default {
data() {
   return {
     option: [{ value: "", label: "" }],
     form: {
       cascader: "",
     },
     rules: {
       cascader: [{ type: 'array', required: true, message: '请选择', trigger: 'change' }]
     }
   }
 }
}
</script>

对象验证

prop=“对象名.键名”

<el-form ref="form" :model="form" :rules="rules">
 <el-form-item label="对象1：" prop="obj.title">
    <el-input v-model="form.obj.title"></el-input>
  </el-form-item>
  <el-form-item label="对象2：" prop="obj.content" :rules="[{ required: true, message: '请输入内容', trigger: 'blur'}]">
    <el-input type="textarea" v-model="form.obj.content">
    </el-input>
  </el-form-item>
</el-form>
<script>
export default {
data() {
    return {
      form: {
        obj: {
          title: "",
          content: "",
        },
      },
      rules: {
        'obj.title': [{ required: true, message: '请输入标题', trigger: 'blur' }],
        // 'obj.content': [{ required: true, message: '请输入', trigger: 'blur' }]  // 或写页面行内
      }
    }
  }
}
</script>

引用子组件

传值的方法里要清空一下校验

<el-form ref="form" :model="form" :rules="rules">
   <el-form-item label="引用组件：" prop="imgUrl" ref="imgUrl">
     <Upload :imgUrl="form.imgUrl" v-on:uploadImg="childImgUrl">
     </Upload>
   </el-form-item>
</el-form>
<script>
import Upload from "../upload";
export default {
  components: { Upload },
  data() {
    return {
      form: {
        imgUrl: "",
      },
      rules: {
        imgUrl: [
          { required: true, message: '请上传图片', trigger: 'change' }
        ],
      }
    }
  },
  methods: {
    childImgUrl(url) {
      this.form.imgUrl = url;
      this.$refs.imgUrl.clearValidate(); // 清除验证提示
    },
  }
}
</script>

循环组件校验

对象数组

<el-form ref="form" :model="form">
  <el-form-item label="多层级嵌套验证：" required>
     <div class="grid-content bg-purple-dark">
       <el-card shadow="never" v-for="(item, index) in form.obj" :key="index">
         <el-form-item :label='"输入框："' :prop="`obj.${index}.title`" :rules="rules.title">
           <el-input type="text" v-model="item.title" maxlength="15" show-word-limit autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item :label='"文本域："' :prop="`obj.${index}.content`" :rules="rules.content">
           <el-input type="textarea" v-model="item.content" autocomplete="off"></el-input>
         </el-form-item>
       </el-card>
     </div>
   </el-form-item>
   <el-form-item>
     <el-row type="flex" justify="center">
       <el-button type="primary" @click="submitForm('form')">保存</el-button>
     </el-row>
   </el-form-item>
 </el-form>
<script>
export default {
  data() {
    return {
      form: {
        obj: [{
          title: "",
          content: "",
        }],
      },
      rules: {
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        content: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('验证通过');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },
  }
}
</script>

数组对象

<el-form ref="form" :model="form">
  <el-form-item label="多层级嵌套验证：" required>
     <div class="grid-content bg-purple-dark">
       <el-card shadow="never" v-for="(item, index) in form" :key="index">
         <el-form-item :label='"输入框："' :prop="`[${index}].title`" :rules="rules.title">
           <el-input type="text" v-model="item.title" maxlength="15" show-word-limit autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item :label='"文本域："' :prop="`[${index}].content`" :rules="rules.content">
           <el-input type="textarea" v-model="item.content" autocomplete="off"></el-input>
         </el-form-item>
       </el-card>
     </div>
   </el-form-item>
   <el-form-item>
     <el-row type="flex" justify="center">
       <el-button type="primary" @click="submitForm('form')">保存</el-button>
     </el-row>
   </el-form-item>
 </el-form>
<script>
export default {
  data() {
    return {
      form: [{
          title: "",
          content: "",
      }],
      rules: {
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        content: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('验证通过');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },
  }
}
</script>

表格可编辑列必填校验

表格内可编辑输入框,对应表头加“*”提示必填

<template>
  <div>
    <el-form ref="form" :model="ruleForm" label-width="100px">
      <el-table ref="tableList" :data="ruleForm.tableList" border>
        <el-table-column prop="sort" label="序号" width="70" align="center">
          <template slot-scope="scope">{{scope.row.sort+1}}</template>
        </el-table-column>
        <el-table-column prop="number" label="吃什么呢" align="center" :render-header="addRedStar">
          <template slot-scope="scope">
            <el-form-item label="" label-width="0" :prop="`tableList.${scope.row.sort}.number`" :rules="tableRules.number"
              class="clear-both">
              <el-select v-model="scope.row.number" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <br>
    <el-row type="flex" justify="center">
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
    data() {
    // 自定义校验规则
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请选择'));
      } else {
        callback();
      }
    };
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      tableRules: {
        number: { required: true, message: '请选择', trigger: 'change', validator: validatePass, }
      },
      ruleForm: {
        tableList: [{
          sort: 0,
          number: ""
        }, {
          sort: 1,
          number: ""
        }],
      }
    }
  },
  methods: {
    // 表头添加*
    addRedStar(h, { column }) {
      return [
        h("span", { style: "color: red" }, "*"),
        h("span", " " + column.label),
      ];
      },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid)
      })
    }
  }
}
</script>