这种方式适合校验个别字段，或者表单字段有改变的校验。
<template> <div> <el-form :model="model"> <el-form-item label="姓名：" prop="name" :rules="[{required:true,message:‘请输入姓名‘,trigger:‘blur‘}]"> <el-input v-model="model.name" placeholder="请输入姓名" clearable></el-input> </el-form-item> </el-form> </div> </template> <script> export default { name: "Test", data() { return { model: { name: "", } } }, } </script>
rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名代码如下所示：
<template> <div> <el-form :model="model" :rules="rules"> <el-form-item label="姓名：" prop="name"> <el-input v-model="model.name" placeholder="请输入姓名" clearable></el-input> </el-form-item> </el-form> </div> </template> <script> export default { name: "Test", data() { return { model: { name: "", }, rules: { name: [{required: true, message: ‘请输入姓名‘, trigger: ‘blur‘}] } } }, } </script>
动态表单校验，需要在单个的表单域上传递属性的验证，示例代码如下所示：
<template> <div> <el-form :model="model"> <el-form-item v-for="(item, index) in model.name" :label="‘名字‘ + index" :key="item.key" :prop="‘name.‘ + index + ‘.value‘" :rules="{required: true, message: ‘请输入姓名‘, trigger: ‘blur‘}" > <el-input v-model="item.value"></el-input> </el-form-item> </el-form> </div> </template> <script> export default { name: "Test", data() { return { model: { name: [{value: ""}, {value: ""}], } } }, } </script>
效果如下图所示：
四、多个表单的校验
校验多个表单的思路是：所有单个表单的校验结果返回一个promise，将所有的promise放入一个数组，使用promise.all进行校验。
代码如下所示：
<template> <div> <el-form :model="model1" ref="form1"> <el-form-item label="姓名：" prop="name" :rules="[{required:true,message:‘请输入姓名‘,trigger:‘blur‘}]"> <el-input v-model="model1.name" placeholder="请输入姓名" clearable></el-input> </el-form-item> </el-form> <el-form :model="model2" ref="form2"> <el-form-item label="性别：" prop="gender" :rules="[{required:true,message:‘请输入性别‘,trigger:‘blur‘}]"> <el-input v-model="model2.gender" placeholder="请输入性别" clearable></el-input> </el-form-item> </el-form> <el-form :model="model3" ref="form3"> <el-form-item label="年龄：" prop="age" :rules="[{required:true,message:‘请输入年龄‘,trigger:‘blur‘}]"> <el-input v-model="model3.age" placeholder="请输入年龄" clearable></el-input> </el-form-item> </el-form> <el-button type="primary" @click="submit">点击校验</el-button> </div> </template> <script> export default { name: "Test", data() { return { model1: { name: "", }, model2: { gender: "", }, model3: { age: "", } } }, methods: { submit() { let list = []; list.push( this.checkForm("form1"), this.checkForm("form2"), this.checkForm("form3")); Promise.all(list) .then(() => { console.log("通过检测"); }) .catch(() => { console.log("未通过"); }); }, //检查表单是否校验通过，返回Promise checkForm(formName) { return new Promise((resolve, reject) => { this.$refs[formName].validate(valid => { if (valid) { resolve(); } else reject(); }); }); } } } </script>
原文：https://www.cnblogs.com/gg-qq/p/13932623.html