vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue rules校验规则

Vue中常用的rules校验规则的实现

作者：你邻座的怪同学

在vue开发中,难免遇到各种表单校验,本文主要介绍了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()
      }
    }
  }
}

到此这篇关于Vue中常用的rules校验规则的实现的文章就介绍到这了,更多相关Vue rules校验规则内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:
阅读全文