为防止用户犯错    
    
    
，尽可能更早地发现并纠正错误    
    
    
    。

Element中Form （表单）组件提供了表单验证的功能     


     


     


    ，只需要通过 rules 属性传入约定的验证规则




 




 




 


，并将 Form-Item 的 prop 属性设置为需校验的字段名即可


     


     


     


。

注意：prop对应表单域 model 字段
   

   

   

，使用 validate方法时     

     

     

   ，该属性是必填的
 




 




 




。

表单验证rules

以官网给出的例子分析来看

将prop 属性设置为需校验的字段名   

   

   

   。

 在data里配置要校验字段和校验规则：

required:true表示为必须输入；

message:""设置不符合校验规则时的提示信息；

trigger:""设置校验的触发方式：

        ‘change’:数据改变时触发；

‘blur’:失去焦点时触发；

没有进行任何输入时,不会触发change,但一定会触发blur事件 

     

     

     

。

设置校验规则后 




  




  




  

，表头会出现红色*样式

该示例完整代码：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="活动区域" prop="region"> <el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活动时间" required> <el-col :span="11"> <el-form-item prop="date1"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> </el-form-item> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-form-item prop="date2"> <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker> </el-form-item> </el-col> </el-form-item> <el-form-item label="即时配送" prop="delivery"> <el-switch v-model="ruleForm.delivery"></el-switch> </el-form-item> <el-form-item label="活动性质" prop="type"> <el-checkbox-group v-model="ruleForm.type"> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊资源" prop="resource"> <el-radio-group v-model="ruleForm.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线下场地免费"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活动形式" prop="desc"> <el-input type="textarea" v-model="ruleForm.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(ruleForm)">立即创建</el-button> <el-button @click="resetForm(ruleForm)">重置</el-button> </el-form-item> </el-form> <script> export default { data() { return { ruleForm: { name: , region: , date1: , date2: , delivery: false, type: [], resource: , desc: }, rules: { name: [ { required: true, message: 请输入活动名称, trigger: blur }, { min: 3, max: 5, message: 长度在 3 到 5 个字符, trigger: blur } ], region: [ { required: true, message: 请选择活动区域, trigger: change } ], date1: [ { type: date, required: true, message: 请选择日期, trigger: change } ], date2: [ { type: date, required: true, message: 请选择时间, trigger: change } ], type: [ { type: array, required: true, message: 请至少选择一个活动性质, trigger: change } ], resource: [ { required: true, message: 请选择活动资源, trigger: change } ], desc: [ { required: true, message: 请填写活动形式, trigger: blur } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert(submit!); } else { console.log(error submit!!); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>

自定义校验规则

除此之外

  


  


  


，我们还可以使用validator验证器来自定义校验规则     
     
     
  ，

举一个使用自定义验证规则来完成密码的二次验证的例子

  




  




  




。

还是和之前一样  




   




   




   
，设置prop需校验的字段名和v-model绑定值

 但这时


 



 



 



，我们需要在data中自己定义校验规则                ，需要注意的是   




    




    




    ，设置的规则与return同级  


  


  


  。

 在rules中配置要校验的字段和用到的规则

完整代码如下：

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(ruleForm)">提交</el-button> <el-button @click="resetForm(ruleForm)">重置</el-button> </el-form-item> </el-form> <script> export default { data() { var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error(年龄不能为空)); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error(请输入数字值)); } else { if (value < 18) { callback(new Error(必须年满18岁)); } else { callback(); } } }, 1000); }; var validatePass = (rule, value, callback) => { if (value === ) { callback(new Error(请输入密码)); } else { if (this.ruleForm.checkPass !== ) { this.$refs.ruleForm.validateField(checkPass); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === ) { callback(new Error(请再次输入密码)); } else if (value !== this.ruleForm.pass) { callback(new Error(两次输入密码不一致!)); } else { callback(); } }; return { ruleForm: { pass: , checkPass: , age: }, rules: { pass: [ { validator: validatePass, trigger: blur } ], checkPass: [ { validator: validatePass2, trigger: blur } ], age: [ { validator: checkAge, trigger: blur } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert(submit!); } else { console.log(error submit!!); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>