第十二篇:VUE前端开发常用的正则表达式-封装js文件可直接引用

前言:在日常开发当中经常用到一些正则表达式, 比如 电话号码、邮箱、IP和 数字等校验,个人每次都要去查阅下才知道怎么书写,特自己封装一个,方便后续查阅,

同时后续还会新增一些校验

先看下校验的效果:

 

话不多说,直接放代码:

1. 个人封装一个公共的 js文件,名命为 regulation.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()
  },
  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 valid from '@/util/regulation.js'

3. 在需要校验的输入框位置,直接调用 valid.******* 即可

如上述的例子,直接调用使用:

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

4. 上述简单的 demo 如下:

<template>
  <div>
    <el-form ref="searchform" :model="form" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="正则表达式校验" prop="validtime">
            <el-input
              type="text"
              v-model="form.validtime"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import valid from '@/util/validator.js'
export default {
  components: {},
  data() {
    return {
      form: {
        validtime: ''
      },
      rules: {
        validtime: [
          {
            required: true,
            message: '请输入校验信息',
            trigger: ['change', 'blur']
          },
          {
            validator: valid.notValidInputText,
            message: '',
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  watch: {},
  methods: {}
}
</script>

<style lang="scss" scoped></style>

5. 感谢支持,一起学习一起进步 🙏🙏

上一篇: 第十一篇: 使用ElementUi 卡片封装一个季度选择器公共组件,可直接使用

  • 5
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值