常用的正则校验提前封装以及使用

前言

目前前端开发中必不可少对手机号，邮箱等各种校验。故作此整理，便于后续的使用和持续性维护。

代码模块以及使用

1.创建一个js文件并且将下面代码复制进去

import Vue from 'vue'

let plugin = {}
plugin.install = Vue => {

  /**
   * 校验当前字符串是不是 url
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是url，false: 当前字符串不是url
   */
  Vue.prototype.$wVerifyUrl = str => {
    let regexp = /(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?/gi
    return regexp.test(str)
  }

  /**
   * 粗略检测当前字符串是不是 url
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是url，false: 当前字符串不是url
   */
  Vue.prototype.$wVerifyUrlRough = str => {
    let regexp = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi
    return regexp.test(str)
  }

  /**
   * 粗略检测当前字符串是不是 url schema
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是url，false: 当前字符串不是url
   */
  Vue.prototype.$wVerifyUrlSchema = str => {
    let regexp = /^[a-zA-Z0-9]+\:\/\/$/gi
    return regexp.test(str)
  }

  /**
   * 校验当前字符串是不是为小米商店链接
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是小米商店链接，false: 当前字符串不是小米商店链接
   */
  Vue.prototype.$wVerifyMiUrl = str => {
    let regexp = /^(http|https):\/\/app.mi.com\//gi
    return regexp.test(str)
  }

  /**
   * 校验当前字符串是不是以.apk结尾
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是小米商店链接，false: 当前字符串不是小米商店链接
   */
  Vue.prototype.$wVerifyApkUrl = str => {
    let regexp = /\.apk$/gi
    return regexp.test(str)
  }

  /**
   * 校验当前字符串是不是itunes链接
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是小米商店链接，false: 当前字符串不是小米商店链接
   */
  Vue.prototype.$wVerifyItunesUrl = str => {
    let regexp = /^(http|https):\/\/itunes\.apple\.com/gi
    return regexp.test(str)
  }

  /**
   * 校验当前字符串是不是邮箱
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是邮箱，false: 当前字符串不是邮箱
   */
  Vue.prototype.$wVerifyEmail = str => {
    // let regexp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/gi
    let regexp = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/gi
    return regexp.test(str)
  }

  /**
   * 校验当前字符串是不是传真号
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是传真号，false: 当前字符串不是传真号
   */
  Vue.prototype.$wVerifyFax = str => {
    let regexp = /^(?:\d{3,4}-)?\d{7,8}(?:-\d{1,6})?$/gi
    return regexp.test(str)
  }

  /**
   * 校验当前字符串是不是手机
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是手机，false: 当前字符串不是手机
   */
  Vue.prototype.$wVerifyPhone = str => {
    let regexp = /^((0\d{2,3}-?\d{7,8})|(1[3465789]\d{9}))$/gi
    return regexp.test(str)
  }

  /**
   * 校验当前字符串是不是银行账号
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是银行账号，false: 当前字符串不是银行账号
   */
  Vue.prototype.$wVerifyBankNum = str => {
    let regexp = /^([1-9]{1})(\d{14}|\d{15}|\d{16}|\d{18})$/gi
    return regexp.test(str)
  }

  /**
   * 校验当前是不是浮点数
   * @param {String} str 待校验数字
   * @returns {Boolean} true: 当前字符串是浮点数，false: 当前字符串不是浮点数
   */
  Vue.prototype.$wVerifyDeci = num => {
    let regexp = !/\d+(\.\d+)?$/gi
    return regexp.test(num)
  }
  /**
   * 校验当前是不是税号
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是税号，false: 当前字符串不是税号
   */
  Vue.prototype.$wVerifyTax = str => {
    let regexp = /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/gi
    return regexp.test(str)
  }

  /**
   * 校验当前是不是邮编
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是邮编，false: 当前字符串不是邮编
   */
  Vue.prototype.$wVerifyPostCode = str => {
    let regexp = /^(0[1234567]|1[012356]|2[01234567]|3[0123456]|4[01234567]|5[1234567]|6[1234567]|7[012345]|8[013456])\d{4}$/gi
    return regexp.test(str)
  }

  /**
   * 校验当前是不是身份证
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是身份证，false: 当前字符串不是身份证
   */
  Vue.prototype.$wVerifyidNo = str => {
    let regexp = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/
    return regexp.test(str)
  }

  /**
   * 校验当前是不是qq
   * @param {String} str 待校验字符串
   * @returns {Boolean} true: 当前字符串是qq，false: 当前字符串不是qq
   */
  Vue.prototype.$wVerifyqq = str => {
    let regexp = /^[1-9][0-9]{4,10}$/
    return regexp.test(str)
  }

  /**
 * 校验当前是不是社会统一信用码
 * @param {String} str 待校验字符串
 * @returns {Boolean} true: 当前字符串是社会统一信用码，false: 当前字符串不是社会统一信用码
 */
  Vue.prototype.$wVerifyCreditCode = str => {
    let regexp = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g
    return regexp.test(str)
  }



  Vue.wVerifyUrl = Vue.prototype.$wVerifyUrl
  Vue.wVerifyUrlRough = Vue.prototype.$wVerifyUrlRough
  Vue.wVerifyUrlSchema = Vue.prototype.$wVerifyUrlSchema
  Vue.wVerifyApkUrl = Vue.prototype.$wVerifyApkUrl
  Vue.wVerifyItunesUrl = Vue.prototype.$wVerifyItunesUrl
  Vue.wVerifyMiUrl = Vue.prototype.$wVerifyMiUrl
  Vue.wVerifyEmail = Vue.prototype.$wVerifyEmail
  Vue.wVerifyPhone = Vue.prototype.$wVerifyPhone
  Vue.wVerifyBankNum = Vue.prototype.$wVerifyBankNum
  Vue.wVerifyDeci = Vue.prototype.$wVerifyDeci
  Vue.wVerifyTax = Vue.prototype.$wVerifyTax
  Vue.wVerifyFax = Vue.prototype.$wVerifyFax
  Vue.wVerifyPostCode = Vue.prototype.$wVerifyPostCode
  Vue.wVerifyidNo = Vue.prototype.$wVerifyidNo
  Vue.wVerifyqq = Vue.prototype.$wVerifyqq
  Vue.wVerifyCreditCode = Vue.prototype.$wVerifyCreditCode
}

export default plugin

2.在main.中进行全局引用

import verifier from './plugins/verifier' //此处是我上面存放的正则校验存放的地址，要换成自己的
Vue.use(verifier)

3.使用

例如邮箱的校验方式
email: [
  {
     validator (rule, val, res) {
       if (val !== '' && !Vue.wVerifyEmail(val)) {
         res("请输入正确的邮箱");
       }
       res();
     },
     trigger: "blur",
   },
 ],

其他分享 vscode插件

在编写中可以直接使用插件生成正则校验。