【vue】表单常用校验规则


注意事项:如果要使用校验方法 rules 使用了validator此参数,就无须再使用 message
因为使用同时使用validator,message会使得校验方法中的提示语失效

年龄校验

data() {
    /* 年龄校验*/
    var validateAge = (rule, value, callback) => {
      value += ''
      const reg = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/// 年龄是1-120之间有效
      if (value === '' || value === null) {
        callback(new Error('请填写年龄'))
      } else {
        if (value && value.length > 0) {
          if (!reg.test(value)) {
            callback([new Error('请填写正确的年龄')])
          } else {
            callback()
          }
        } else if (value.length === 0) {
          callback(new Error('请填写年龄'))
        } else {
          callback(new Error('请填写正确的年龄'))
        }
      }
    }
    return {
    rules: {
     age: [
          { required: true, trigger: 'blur', validator: validateAge }
        ]
      }
     }
   }

手机号校验


data() {
    /* 手机号校验*/
    var validatePhone = (rule, value, callback) => {
      const reg = /^1[3-9]\d{9}$/
      if (value === '' || value === null) {
        callback(new Error('请填写联系电话'))
      } else {
        if (value && value.length > 0) {
          if (!reg.test(value)) {
            callback([new Error('请填写正确联系电话')])
          } else {
            callback()
          }
        } else if (value.length === 0) {
          callback(new Error('请填写联系电话'))
        } else {
          callback(new Error('请填写正确联系电话'))
        }
      }
    }
    return {
    rules: {
     phone: [
          { required: true, trigger: 'blur', validator: validatePhone }
        ]
      }
     }
   }

身份证号校验

  /* 身份证号码校验*/
    var checkRegNo = (rule, value, callback) => {
      var 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: '国外 ' }
      const rr = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i
      if (value === '' || value === null) {
        callback(new Error('请填写身份证号码'))
      }
      if (!value || !rr.test(value)) {
        callback(new Error('身份证号码格式错误,请输入18位身份证号码,若最后一位为X请大写'))
      } else if (!city[value.substr(0, 2)]) {
        // tip = "地址编码错误"
        callback(new Error('身份证号码格式错误,请输入18位身份证号码,若最后一位为X请大写'))
      } else {
        // 18位身份证需要验证最后一位校验位
        if (value.length === 18) {
          value = value.split('')
          // ∑(ai×Wi)(mod 11)
          // 加权因子
          var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
          // 校验位
          var parity = "10X98765432"
          var sum = 0
          var ai = 0
          var wi = 0
          for (var i = 0; i < 17; i++) {
            ai = value[i]
            wi = factor[i]
            sum += ai * wi
          }
          const idLastCode = parity[sum % 11]
          if (idLastCode.toString() !== value[17]) {
            callback(new Error('身份证号码格式错误,请输入18位身份证号码,若最后一位为X请大写'))
          }
        } else {
          callback(new Error('身份证号码格式错误,请输入18位身份证号码,若最后一位为X请大写'))
        }
      }
      callback()
    }

邮箱校验

var validateEmail = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请正确填写邮箱'))
        } else {
          if (value !== '') {
            var reg =
              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            if (!reg.test(value)) {
              callback(new Error('请输入有效的邮箱'))
            }
          }
          callback()
        }
      }
return {
rules: {
mail: [{ validator: validateEmail, trigger: 'blur' }],
      }
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值