vue 自定义表单验证器

1.首先我们自己新建一个 validatorUtils.js 文件来存放我们项目中所有的校验器
内容可以是：

/**
 * 校验使用: message: 自定义信息，extra: 对象, 额外传递的参数
 */
/**
 * 是否必须
 * @param {*} rule
 * @param {*} value
 * @param {*} callback
 */
export function validateRequire(rule, value, callback) {
  if (!value && value === '') {
    callback(new Error(rule.message || '此项为必填项'))
  } else {
  // 这里注意一点：校验成功要调用callback() 不然提交表单时会不生效
    callback()
  }
}
/**
 * 校验输入的数字必须是正整数
 * @param {*} rule
 * @param {*} value
 * @param {*} callback
 */
export function validateIntegerNum(rule, value, callback) {
  let val = new RegExp('^[1-9][0-9]*$').test(value)
  if (value && !val) {
    callback(new Error(rule.message || '此项必须输入正整数'))
  } else {
  // 这里注意一点：校验成功要调用callback() 不然提交表单时会不生效
    callback()
  }
}
// 校验IP是否合法
export function validateIP (rule, value, callback) {
  if (value === '' || value === undefined || value === null) {
    callback()
  } else {
    const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
    if ((!reg.test(value)) && value !== '') {
      callback(new Error('请输入正确的IP地址'))
    } else {
    // 这里注意一点：校验成功要调用callback() 不然提交表单时会不生效
      callback()
    }
  }
}

2.在需要校验的.vue 文件中，我们需要导入这个校验函数：

import { validateIP， validatePort,  validateMACAddress } from '@/util/validator' 

可以按需导入你需要的校验函数

3.在表单中使用：
（1）首先要和表单的prop属性相关联
（2）将 validator写入rules

rules: {
        deviceName: [{ required: true, message: '请输入设备名称', trigger: ['blur', 'change'] }],
        IPAddress: [{ validator: validateIP, message: '请输入正确的IP地址', tirgger: ['blur', 'change'] }]
      },

效果如下：

注意：除了validate校验器外，还有messge 校验提示信息以及trigger触发方式，还有一点需要注意的是校验函数的callback必须是第三个参数。即 (rule, value, callback)