vue使用element ui自定义手机验证规则

1.表单的一项

  <el-form-item label="电话" prop="senderPhone">
         <el-input v-model="packageInfo.senderPhone"></el-input>
</el-form-item>

2.制定验证规则

 data() {
    
    
            var checkPhone = (rule, value, callback) => {
    
    
                if (!value) {
    
    
                    return callback(new Error('手机号不能为空'));
                } else {
    
    
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    console.log(reg.test(value));
                    if (reg.test(value)) {
    
    
                        callback();
                    } else {
    
    
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {
    
    
                
                packageInfo:{
    
    
                    senderName:'asdas',
                    senderPhone:'',
              
                },
                packageInfoRules:{
    
    
                    senderName:[
                        {
    
     required: true, message: '请输入寄件人姓名', trigger: 'blur' },
                    ],
                    senderPhone:[

                        {
    
    required:true, validator:checkPhone, trigger: ['blur', 'change'] }

                    ]
                },