浅谈validator自定义验证及易错点

validator自定义验证及易错点

validator自定义验证

element中Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

而表单验证功能就包括validator自定义验证，用法如图所示

在验证规则中自定义一个规则，命名随意，再给它一个触发函数，而规则自定义的方法如下

• value：输入的数据；

• callback：回滚的对象

在这个箭头函数中定义自己想要的规则，就可以实现自定义，但要注意的是必须回滚

易错点

写完测试时发现自定义的验证无法使用，但是其他验证缺没有任何问题，那原因就是在于数据没有绑定成功

这时就应该检查图中这三个地方，自定义验证时是需要这三个地方保持一致的，否则自定义验证不会成功

vue里面如何自定义校验

正常用的都是elemelnt-ui组件的form表单；里面有校验规则；

如下

<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属性来自定义；是模拟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' }
         ]
       }
     };
   },
</script>

来源：https://blog.csdn.net/qq_41905890/article/details/109724341