vue+elementui项目封装form表单公共正则验证

矫情吗；* 2021-07-25 23:07 877阅读 0赞

前期准备：在项目下创建一个工具包文件夹util，文件夹下创建一个formValidation.js文件

1、formValidation.js 文件

  1. let tel = /^1(3|4|5|7|8|9)\d{9}$/; //手机号码
  2. let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/; //姓名
  4. let FormValidate = (function() { 
  5.   function FormValidate() { }
  6.   FormValidate.Form = function() {   // From表单验证规则，可用于公用的校验部分
  7.     return { 
  8.       // 电话号码的验证
  9.       Tel: (rule, value, callback) => { 
  10.         if (!value) { 
  11.           return callback(new Error('联系电话不能为空！'))
  12.         }
  13.         if (!tel.test(value)) { 
  14.           callback(new Error('手机号码有误，请重新填写！'))
  15.         } else { 
  16.           callback()
  17.         }
  18.       },
  20.     }
  21.   }
  23.   // FromOne表单验证规则 用于FromOne个性化的校验
  24.   FormValidate.FormOne = function() { 
  25.     return { 
  26.       // 姓名的验证规则
  27.       Name: function(rule, value, callback) { 
  28.         if (!value) { 
  29.           return callback(new Error('姓名不能为空'))
  30.         }
  31.         if (!name.test(value)) { 
  32.           callback(new Error('请输入正确姓名!'))
  33.         } else { 
  34.           callback()
  35.         }
  36.       }
  37.     }
  38.   }
  40.   return FormValidate
  41. }())
  42. exports.FormValidate = FormValidate
  44.   return FormValidate
  45. }())
  47. exports.FormValidate = FormValidate

2、在src下的 main.js 入口文件注册全局组件

  1. import fromCommon from "../util/fromCommon.js" // 1、导入文件
  3. Vue.prototype.$fromCommon = fromCommon;       // 2、注册成全局验证

3、使用

  1. addRules: { 
  2.    tgeiContactPhone: [{ 
  3.      required: true,
  4.      validator: this.$fromCommon.FormValidate.Form().Tel,
  5.      trigger: 'blur'
  6.    }],
  7. }

发表评论

表情：
评论列表 （有 0 条评论，877人围观）

还没有评论，来说两句吧...

相关阅读

    相关 form表单验证

    iview默认校验数据类型为String,需要的不是字符串要注明type=’ ’ ![在这里插入图片描述][20191113171956686.png] form表单提交

    电玩女神电玩女神/ 0 赞/ 210 阅读