Custom mobile phone number verification regular expression Element (author vue project)

Method 1: You can set the following rules (pattern) in rules

data() {
  return {
    rules: {
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[345789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
      ]
    }
  }
}      

Method 2: Set custom rules (validator)

  data() {
    // 手机号校验方法
    const checkPhone = (rule, value, callback) => {
      const reg = /^1[345789]\d{9}$/;
      if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    };
    return {
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }
        ]
      }
    };
  },