Vue中封装前端常用的正则校验方法，正则表达式

前言

我们在做Vue项目开发的时候，肯定会经常遇到正则表达式，例如手机号，邮箱，密码和数字，每次验证都需要去查询，浪费时间不说，也造成代码冗余，我也遇到过，那我就自己封装一个吧，方便大家使用查询。可以减少咱们的代码量还可以方便我们在前端各大项目中使用。

---

一、创建js文件

在项目中创建一个js文件，方便咱们后期调用，就比如我的：

二、封装正则方法

 个人封装一个公共的 js文件，名命为 rule.js, 如下：

/**
 * 邮箱
 * @param {*} s
 */
export function isEmail (s) {
  return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

/**
 * 手机号码
 * @param {*} s
 */
export function isMobile (s) {
  return /^1[0-9]{10}$/.test(s)
}

/**
 * 电话号码
 * @param {*} s
 */
export function isPhone (s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

/**
 * URL地址
 * @param {*} s
 */
export function isURL (s) {
  return /^http[s]?:\/\/.*/.test(s)
}

/**
 * 正整数
 * @param {*} s
 */
export function isNumber (s) {
  return /^\+?[1-9][0-9]*$/.test(s)
}

/**
 * 身份证号码
 * @param {*} s
 * @returns
 */
export function isIDNo (s) {
  return /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(s)
}
/**
 * 数字带小数点且不能位负数
 * @param {*} s
 */
export function isnegative (s) {
  return /^\+?((0|([1-9]+\d*))|((0\.\d+)|([1-9]+\d*\.\d+)))$/.test(s)
}

/**
 * 年月日
 * @param {*} s
 */
export function specificdate (s) {
  return /^\d{4}\-\d{2}\-\d{2}$/.test(s)
}

三、项目中使用

1、引入封装好的文件

import { isMobile } from '@/utils/validate'

2、具体使用

就比如验证手机号，打印一下看看

这是对的，控制台输出true，如果格式不对输出false，其他的都是一样的，比葫芦画瓢

3、在你的项目中怎么使用呢！

import { isMobile } from '@/utils/validate'
let validateMobile = (rule, value, callback) => {
  if (!isMobile(value)) {
    return callback(new Error('手机号格式不正确'))
  }
  callback()
}



//在你需要校验的字段data中填写，可以参考elementUI中表单校验书写格式
rules: [
          { required: true, message: '请输入', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ]

---

感谢支持，博主会持续分享更好用的组件