element-ui —— 正则表单验证

前言：在日常开发当中经常用到一些正则表达式， 比如 电话号码、邮箱、IP和 数字等校验，每次都要去查阅下才知道怎么书写，特封装一个，方便后续查阅，本文会持续更新，也非常欢迎小伙伴们来评论区补充~

1. 封装一个公共 js文件，名命为 validate.js 如下：

export default {
  telphone: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/g.test(
      value
    )
    if (!pass) {
      callback(new Error(rule.message || '正确格式: 区号-电话号码 或 电话号码'))
    }
    callback()
  },
  phone: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^(\\+86)?0?[1][34578][0-9]{9}$/g.test(value)
    if (!pass) {
      callback(new Error(rule.message || '请输入正确的电话号码'))
    }
    callback()
  },
  email: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^[a-zA-Z0-9_.-]+@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9]{2,4}$/g.test(
      value
    )
    if (!pass) {
      callback(new Error(rule.message || '请输入正确的邮箱'))
    }
    callback()
  },
  money: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^\-?(?!0+)?:.0+)?$)(?:[1-9]\d*|0)(?:.\d{1,2})?$/.test(value))
    if (isNaN(value)) {
      return callback(new Error('必须为数字'));
    }
    if (String(value).split('.').length > 0) {
      if (String(value).split('.')[0].length > 9) {
        return callback(new Error('整数部分不能大于9位'));
      }
      if (value !== 0) {
        if (!pass || !value) {
          return callback(new Error('钱数精确两位小数'));
        }
      }
    }
    callback();
  },
  postcode: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^\d{6}$/g.test(value)
    if (!pass) {
      callback(new Error(rule.message || '必须是6位数字'))
    }
    callback()
  },
  notValidInputText: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^[^'/\\"()@$%^*<>&?]*$/g.test(value)
    if (!pass) {
      callback(new Error(rule.message || '不能包含特殊字符^\'\\"()@$%^*<>&?*'))
    }
    callback()
  },
  isNumber: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^[0-9]*$/g.test(value)
    if (!pass) {
      callback(new Error(rule.message || '只能为数字'))
    }
    callback()
  },
  ip: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^(\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])$/g.test(
      value
    )
    if (!pass) {
      callback(new Error(rule.message || '请输入正确的ip地址'))
    }
    callback()
  },
  letterOrNumber: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^[0-9a-zA-Z]+$/g.test(value)
    if (!pass) {
      callback(new Error(rule.message || '只能是数字和字母'))
    }
    callback()
  },
  id: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^[a-zA-Z0-9-]{3,20}$/g.test(value)
    if (!pass) {
      callback(new Error(rule.message || '只能为 3-20 位字符串'))
    }
    callback()
  },
  number: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^[0-9]{1,10}$/g.test(value)
    if (!pass) {
      callback(new Error(rule.message || '必须是数字'))
    }
    callback()
  },
  positiveNumber: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^[0-9]\d*$/g.test(value)
    if (!pass) {
      callback(new Error(rule.message || '必须是正整数'))
    }
    callback()
  },
  posiNactiveNumber: (rule, value, callback) => {
    if (value === '') {
      callback()
      return
    }
    const pass = /^[+-]?\d+(\.\d+)?$/g.test(value)
    if (!pass) {
      callback(new Error(rule.message || '可输入正数负数和小数'))
    }
    callback()
  }
}

2. 在组件中引用该 js 文件即可

import validate from '@/util/validate.js'

3. （以element-ui为例）在需要校验的输入框位置，直接调用 validate.*** 即可

rules: {
        validtime: [
          {
            required: true,
            message: '请输入校验信息',
            trigger: ['change', 'blur']
          },
          {
            validator: validate.notValidInputText,
            message: '',
            trigger: ['change', 'blur']
          }
        ]
}

4. demo示例

<template>
  <div>
    <el-form ref="searchform" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="正则表达式校验" prop="validtime">
        <el-input
          type="text"
          v-model="form.validtime"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
import validate from '@/util/validate.js'
export default {
  data() {
    return {
      form: {
        validtime: ''
      },
      rules: {
        validtime: [
          {
            required: true,
            message: '请输入校验信息',
            trigger: ['change', 'blur']
          },
          {
            validator: validate.notValidInputText,
            message: '',
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  }
}
</script>

感谢博客 https://blog.csdn.net/Yzt_199626/article/details/117295974

如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！