vue 表单校验工具

规则说明

方法	作用
required: true	表示必填项
message	校验失败时显示的提示信息
validator	自定义校验函数
trigger	触发校验的事件类型（通常用 blur 或 change）

trigger 事件类型

1. blur

• 当元素失去焦点时触发。这是最常见的触发方式之一，适合用于输入框内容的校验。

  { required: true, message: '请输入内容', trigger: 'blur' }

2. change

• 当元素的值发生改变时触发。对于下拉菜单、复选框等组件非常有用。

  { required: true, message: '请选择一项', trigger: 'change' }

3. input

• 对于一些实时校验的需求，比如用户每输入一个字符就进行一次校验，可以使用 input 事件。这通常用于即时反馈用户输入是否符合要求

  { validator: validateInput, trigger: 'input' }

4. 多个事件类型组合

• 可以同时指定多个事件类型来触发校验，通过数组的方式定义。

  { required: true, message: '请输入有效信息', trigger: ['blur', 'change'] }

其他的具体校验（正则）

电话

phone: [
    { required: true, message: '电话不能为空', trigger: 'blur' },
    { validator: validatePhone, trigger: 'blur' }
  ],

const validatePhone = (rule, value, callback) => {
  const reg = /^1[3-9]\d{9}$/
  if (!reg.test(value)) {
    callback(new Error('请输入11位有效手机号'))
  } else {
    callback()
  }
}

身份证

idcard: [
    { required: true, message: '身份证不能为空', trigger: 'blur' },
    { validator: validateIdCard, trigger: 'blur' }
  ],

const validateIdCard = (rule, value, callback) => {
  const reg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/
  if (!reg.test(value)) {
    callback(new Error('请输入有效的18位身份证号'))
  } else {
    callback()
  }
}

姓名

name: [
    { required: true, message: '姓名不能为空', trigger: 'blur' },
    { validator: validateName, trigger: 'blur' }
  ],

const validateName = (rule, value, callback) => {
  const reg = /^[\u4e00-\u9fa5]{1,4}$/
  if (!reg.test(value)) {
    callback(new Error('姓名必须为1~4个汉字'))
  } else {
    callback()
  }
}

编号

number: [
    { required: true, message: '编号不能为空', trigger: 'blur' },
    { validator: validateNumber, trigger: 'blur' }
  ]

const validateNumber = (rule, value, callback) => {
  const reg = /^\d{12}$/
  if (!reg.test(value)) {
    callback(new Error('编号必须为12位数字'))
  } else {
    callback()
  }
}

强密码：包含英文大小写，数字和特殊字符，并且大于等于9位

const isValidPassword=(password)=> {
  const reg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*]).{9,}$/;
  return reg.test(password);
}

 后续再加！！！