Vue自定义表单内容检查rules

Vue自定义表单内容检查rules

先看个例子

• 效果
  • 错误时的效果
    • 
  • 正确时的效果
    • 
• 组件

   

  <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