Vue中常用的rules校验规则

vue的rules中自带的校验规则和常用正则表达式校验

rules: {
    //验证非空和长度
    name: [{
        required: true,
        message: "站点名称不能为空",
        trigger: "blur"
        },{
        min: 3, 
        max: 5, 
        message: '长度在 3 到 5 个字符', 
        trigger: 'blur' 
    }],
    //验证数值
    age: [{ 
        type: 'number', 
        message: '年龄必须为数字值',
        trigger: "blur"
    }],
    //验证日期
    birthday:[{ 
        type: 'date', 
        required: true, 
        message: '请选择日期', 
        trigger: 'change' 
    }],
    //验证多选
    habit: [{ 
        type: 'array', 
        required: true, 
        message: '请至少选择一个爱好', 
        trigger: 'change' 
    }],
    //验证邮箱
    email: [{ 
        type: 'email', 
        message: '请输入正确的邮箱地址', 
        trigger: ['blur', 'change'] 
    }],
    // 验证手机号
    telephone: [{
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "请输入正确的手机号码",
        trigger: "blur"
    }],
    // 验证经度 整数部分为0-180小数部分为0到7位
    longitude: [{
        pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
        message: "整数部分为0-180,小数部分为0到7位",
        trigger: "blur"
    }],
    // 验证维度 整数部分为0-90小数部分为0到7位
    latitude: [{
        pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
        message: "整数部分为0-90,小数部分为0到7位",
        trigger: "blur"
    }]          
}

vue的rules中自定义校验规则

<script>
  import { checkParam } from "@/api/system/param.js";

  export default {
    name: "Param",
    data() {
      var validateCode = (rule, value, callback) => {
        if (value === '') {} else {
          if (value !== '') {
            const param = {
              id: this.form.id,
              code: this.form.code
            }
            checkParam(param).then(response => {
              if (!response.data) {
                callback(new Error(response.msg));
              } else {
                callback();
              }
            });
          }
        }
      };
      return {
        // 表单校验
        rules: {
          code: [{
            required: true,
            message: "参数编码不能为空",
            trigger: "blur"
          }, {
            max: 50,
            message: '参数编码在 50 个字以内',
            trigger: 'blur'
          }, {
            validator: validateCode,
            trigger: 'blur'
          }]
        }
      };
    },
    created() {

    },
    methods: {

    }
  };
</script>

使用方法

age: [{ validator: this.formValidate.validateIngeterGTZRule, tigger: 'blur' }]

校验工具类

import validator from 'validator'
/* 表单校验规则方法命名以Rule为结尾，方便和一遍的校验区分*/

export default {
  validateNumberRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isNumeric('' + value)) {
      callback(new Error('请输入数字'))
    } else {
      callback()
    }
  },
  validateNumberGTZRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (validator.isNumeric('' + value, [{ no_symbols: false }]) && value > 0) {
      callback()
    } else {
      callback(new Error('请输入正数'))
    }
  },
  validateIntegerRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isInt('' + value)) {
      callback(new Error('请输入整数'))
    } else {
      callback()
    }
  },
  validateIngeterGTZRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isInt('' + value, { gt: 0 })) {
      callback(new Error('请输入正整数'))
    } else {
      callback()
    }
  },
  validateAlphaRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isAlpha(value, 'en-US')) {
      callback(new Error('请输入纯字母'))
    } else {
      callback()
    }
  },

  /*  是否身份证号码*/
  validateIdNoRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    if (value === '' || value === undefined || value === null) {
      callback()
    } else {
      if ((!reg.test(value)) && value !== '') {
        callback(new Error('请输入正确的身份证号码'))
      } else {
        callback()
      }
    }
  },
  /*  是否身份证号码,详细规则校验*/
  validateIdNoStrictRule(rule, code, callback) {
    if (code === undefined || code === null || code === '') {
      callback()
    }
    const city = {
      11: '北京',
      12: '天津',
      13: '河北',
      14: '山西',
      15: '内蒙古',
      21: '辽宁',
      22: '吉林',
      23: '黑龙江 ',
      31: '上海',
      32: '江苏',
      33: '浙江',
      34: '安徽',
      35: '福建',
      36: '江西',
      37: '山东',
      41: '河南',
      42: '湖北 ',
      43: '湖南',
      44: '广东',
      45: '广西',
      46: '海南',
      50: '重庆',
      51: '四川',
      52: '贵州',
      53: '云南',
      54: '西藏 ',
      61: '陕西',
      62: '甘肃',
      63: '青海',
      64: '宁夏',
      65: '新疆',
      71: '台湾',
      81: '香港',
      82: '澳门',
      91: '国外 '
    }
    let tip = ''
    let pass = true

    if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
      tip = '身份证号格式错误'
      pass = false
    } else if (!city[code.substr(0, 2)]) {
      tip = '地址编码错误'
      pass = false
    } else {
      // 18位身份证需要验证最后一位校验位
      if (code.length === 18) {
        code = code.split('')
        // ∑(ai×Wi)(mod 11)
        // 加权因子
        const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
        // 校验位
        const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
        let sum = 0
        let ai = 0
        let wi = 0
        for (let i = 0; i < 17; i++) {
          ai = code[i]
          wi = factor[i]
          sum += ai * wi
        }
        if (parity[sum % 11] !== code[17]) {
          tip = '校验位错误'
          pass = false
        }
      }
    }
    if (!pass) {
      callback(new Error(tip))
    } else {
      callback()
    }
    // if (!pass) alert(tip)
    // return pass
  },

  validateURLRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isURL(value)) {
      callback(new Error('请输入正确的网址'))
    } else {
      callback()
    }
  },
  /*  是否邮箱*/
  validateEMailRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
    if (value === '' || value === undefined || value === null) {
      callback()
    } else {
      if (!reg.test(value)) {
        callback(new Error('请输入正确的邮箱地址'))
      } else {
        callback()
      }
    }
  },
  /*  是否手机号码*/
  validateMobileRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
    if (value === '' || value === undefined || value === null) {
      callback()
    } else {
      if ((!reg.test(value)) && value !== '') {
        callback(new Error('请输入正确的电话号码'))
      } else {
        callback()
      }
    }
  },
  /*  是否手机号码或者固话*/
  validateTelOrMobileRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
    if (value === '' || value === undefined || value === null) {
      callback()
    } else {
      if ((!reg.test(value)) && value !== '') {
        callback(new Error('请输入正确的电话号码或者固话号码'))
      } else {
        callback()
      }
    }
  },
  /*  是否固话*/
  validateTelphoneRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    const reg = /0\d{2}-\d{7,8}/
    if (value === '' || value === undefined || value === null) {
      callback()
    } else {
      if ((!reg.test(value)) && value !== '') {
        callback(new Error('请输入正确的固话（格式：区号+号码,如010-1234567）'))
      } else {
        callback()
      }
    }
  },

  /*  是否合法IP地址*/
  validateIPRule(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()
      }
    }
  }
}