【element-ui】form表单校验手机号 手动校验规则

  <el-form class="form-x" ref="form" :model="sizeForm" :rules="rulesForm">
          
            <el-form-item label="2.手机号" prop="phone">
              <el-input v-model="sizeForm.phone"></el-input>
            </el-form-item>
         
          </el-form>

 data() {
    var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('号码不能为空!!'))
      }
      setTimeout(() => {
        if (!phoneReg.test(value)) {
          callback(new Error('格式有误'))
        } else {
          callback()
        }
      }, 100)
    }

    return {
      
      rulesForm: {
        phone: [
          {
            required: true, // required就是这个框必须填写
            message: '不能空着',
            validator: validatePhone, // 规则
            trigger: 'blur', // blur失去焦点，事件何时触发
          },
        ],
     
      },
    
      sizeForm: {
       
        phone: '',
     
      },

    
    }
  },

另一种方法

var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback();
      } else {
        if (
          !/^((1[3-9][0-9]))\d{8}$|^(5|6|8|9)\d{7}$|^\d{3,4}-\d{7,8}$|^(852)?(2[1-9]|3[145679])\d{6}$/.test(
            value
          )
        ) {
          callback(new Error("手机号格式出错"));
        } else {
          callback();
        }
      }
   
    }