表单验证的验证器进阶

基本使用方法

rules: {
  /* 讲述一下trigger的几种方式 */
  // 在input失去焦点时触发
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  // 仅在输入框失去焦点或用户按下回车时触发
  caption: [{ required: true, message: '显示名不能为空', trigger: 'change' }],
  // 在input获取焦点时触发
  deptId: [{ required: true, message: '请选择部门', trigger: 'focus' }],
  // 在input值改变时触发
  role: [{ required: true, message: '至少选择一个角色', trigger: 'input' }],
  // 点击有clearable属性生成的清空按钮时触发
  lockFlag: [{ required: true, message: '请选择状态', trigger: 'clear' }]
}

单正则使用

rules: {
  phone: [
    {
      required: true,
      message: '请输入手机号'
    },
    // 使用正则限制号码
    { pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/, message: '手机号码格式不正确', trigger: 'blur' },
  ],
  email: [
    {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur'
    },
    // 使用正则限制邮箱格式
    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '邮箱格式不正确', trigger: 'blur' }
  ]
}

validator自定义验证

// 定义验证配置对象
rules: {
  phone: [
    {
      validator: validatePhoneNumber,
      trigger: 'blur'
    }
  ],
}

// 验证器函数

/*
rule :指向该条规则对象
value:新的值，用于参与运算、对比。
callback:执行回调
  不传参：表示验证通过，一般不必专门强调。
  传入字符串 || Error对象：字符串会作为错误提示
 ... (还有个别参数)
*/
  const validatePhoneNumber = (rule, value, callback) => {
    // 设置验证的正则 || 设置验证条件
    const reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
    if (!value) return;
    if (dialogType.value === '0') {
      // 按照规则进行验证
      reg.test(value) ? callback() : callback(new Error('请输入正确的手机号'));
    } else {
      if (initNumber == value) {
        callback();
      } else if (value.indexOf('*') > 0 && value.length == 11) {
        callback(new Error('不能在加密的原号码基础上修改号码，请重新键入新的号码'));
      } else {
        reg.test(value) ? callback() : callback(new Error('请输入正确的手机号'));
      }
    }
  };