Vue自定义表单内容检查rules

柔光的暖阳◎ 2022-04-11 02:40 226阅读 0赞

# **Vue自定义表单内容检查rules** #

### **先看个例子** ###

*  效果
    
     *  错误时的效果
        
         *  ![aJKe3ri.jpg][]
     *  正确时的效果
        
         *  ![vAe3oyM.jpg][]
 *  组件
    
     
    
        <el-form-item label="手机号:" prop="phone_number">
            <el-input v-model="formPerson.phone_number"></el-input>
        </el-form-item>
 *  script中
    
     
    
        export default {
            data() {
                var validateMobilePhone = (rule, value, callback) => {
                    if (value === '') {
                      callback(new Error('负责人手机号不可为空'));
                    } else {
                      if (value !== '') {
                        var reg = /^1[3456789]\d{9}$/;
                        if (!reg.test(value)) {
                          callback(new Error('请输入有效的手机号码'));
                        } else {
                          callback();
                        }
                      }
                    }
                };
        
                return{
                    formPerson: {
                        phone_number: '',
                    },
                    rules: {
                        phone_number: [
                        {validator: validateMobilePhone, trigger: 'blur'}
                        ]
                    },
                }
            }
        }

### **遇到的坑** ###

*  在组件中【开始写的时候prop自定的名字】
    
     
    
        <el-form-item label="手机号:" prop="phone">
            <el-input v-model="formPerson.phone_number"></el-input>
        </el-form-item>
 *  rules中
    
     
    
        rules: {
            phone: [
            {validator: validateMobilePhone, trigger: 'blur'}
            ]
        }
 *  碰到的坑
    
     *  当输入正确的手机号时，显示为错误，发现value并没有传过来，为undefined
        
         *  解决:prop写成和数据中的参数的名称一样，即phone\_number

[aJKe3ri.jpg]: https://i.imgur.com/aJKe3ri.jpg
[vAe3oyM.jpg]: https://i.imgur.com/vAe3oyM.jpg