快捷導(dǎo)航

Vue中常用的rules校驗規(guī)則的實現(xiàn)

更新時間：2023年10月09日 11:36:31 作者：你鄰座的怪同學(xué)

在vue開發(fā)中,難免遇到各種表單校驗,本文主要介紹了Vue中常用的rules校驗規(guī)則的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下

vue的rules中自帶的校驗規(guī)則和常用正則表達式校驗

rules: {
    //驗證非空和長度
    name: [{
        required: true,
        message: "站點名稱不能為空",
        trigger: "blur"
        },{
        min: 3, 
        max: 5, 
        message: '長度在 3 到 5 個字符', 
        trigger: 'blur' 
    }],
    //驗證數(shù)值
    age: [{ 
        type: 'number', 
        message: '年齡必須為數(shù)字值',
        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"
    }],
    // 驗證經(jīng)度 整數(shù)部分為0-180小數(shù)部分為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: "整數(shù)部分為0-180,小數(shù)部分為0到7位",
        trigger: "blur"
    }],
    // 驗證維度 整數(shù)部分為0-90小數(shù)部分為0到7位
    latitude: [{
        pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
        message: "整數(shù)部分為0-90,小數(shù)部分為0到7位",
        trigger: "blur"
    }]          
}

vue的rules中自定義校驗規(guī)則

<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: "參數(shù)編碼不能為空",
            trigger: "blur"
          }, {
            max: 50,
            message: '參數(shù)編碼在 50 個字以內(nèi)',
            trigger: 'blur'
          }, {
            validator: validateCode,
            trigger: 'blur'
          }]
        }
      };
    },
    created() {
    },
    methods: {
    }
  };
</script>

使用方法

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

校驗工具類

import validator from 'validator'
/* 表單校驗規(guī)則方法命名以Rule為結(jié)尾，方便和一遍的校驗區(qū)分*/
export default {
  validateNumberRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isNumeric('' + value)) {
      callback(new Error('請輸入數(shù)字'))
    } 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('請輸入正數(shù)'))
    }
  },
  validateIntegerRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isInt('' + value)) {
      callback(new Error('請輸入整數(shù)'))
    } else {
      callback()
    }
  },
  validateIngeterGTZRule(rule, value, callback) {
    if (value === undefined || value === null || value === '') {
      callback()
    }
    if (!validator.isInt('' + value, { gt: 0 })) {
      callback(new Error('請輸入正整數(shù)'))
    } 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()
      }
    }
  },
  /*  是否身份證號碼,詳細規(guī)則校驗*/
  validateIdNoStrictRule(rule, code, callback) {
    if (code === undefined || code === null || code === '') {
      callback()
    }
    const city = {
      11: '北京',
      12: '天津',
      13: '河北',
      14: '山西',
      15: '內(nèi)蒙古',
      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)
        // 加權(quán)因子
        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('請輸入正確的網(wǎng)址'))
    } 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('請輸入正確的固話（格式：區(qū)號+號碼,如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()
      }
    }
  }
}

到此這篇關(guān)于Vue中常用的rules校驗規(guī)則的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue rules校驗規(guī)則內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: