注册全局form表单验证工具包

Myth丶恋晨 2021-07-25 20:59 409阅读 0赞

1、js注册文件

let regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //机构
    let email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/; //邮箱
    let tel = /^1(3|4|5|7|8|9)\d{9}$/; //手机号码
    // let tel = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/; // 手机号 + 座机号
    let fax = /^(\d{3,4}-)?\d{7,8}$/; //传真
    let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/; //姓名
    let pass1 = /^[0-9]{6,20}$/; // 6-20 位数字密码
    let answer = /^[A-G]{0,1}$/; // 答案(A - G)
    let idCard = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/; //身份证号
    let percent = /^([1]?\d{ 1,2})$/ // 百分比(0-100的正整数,包含0,100)
    let FormValidate = (function() { 
      // eslint-disable-next-line
      function FormValidate() { }
      // From表单验证规则 可用于公用的校验部分
      FormValidate.Form = function() { 
        return { 
          // 姓名的验证规则
          Name: function(rule, value, callback) { 
            if (!value) { 
              return callback(new Error('姓名不能为空！'))
            }
            if (!name.test(value)) { 
              callback(new Error('请输入正确姓名!'))
            } else { 
              callback()
            }
          },
          // 邮箱的正则
          Email: function(rule, value, callback) { 
            if (!value) { 
              return callback(new Error('邮箱不能为空'))
            }
            if (!email.test(value)) { 
              callback(new Error('请输入正确的邮箱!'))
            } else { 
              callback()
            }
          },
          // 身份证的验证规则
          ID: function(rule, value, callback) { 
            if (!value) { 
              return callback(new Error('身份证不能为空'))
            }
            if (!regId.test(value)) { 
              callback(new Error('请输入正确的二代身份证号码'))
            } else { 
              callback()
            }
          },
          // 电话号码的验证
          Tel: (rule, value, callback) => { 
            if (!value) { 
              return callback(new Error('联系电话不能为空！'))
            }
            if (!tel.test(value)) { 
              callback(new Error('手机号码有误，请重新填写！'))
            } else { 
              callback()
            }
          },
          // 输入密码验证
          Checkpass: (rule, value, callback) => { 
            if (!value) { 
              return callback(new Error('请输入正确的登录密码！'))
            }
            if (!pass1.test(value)) { 
              callback(new Error('请输入长度为 6 ~ 20 位的登录密码！'))
            } else { 
              callback()
            }
          },
          // 答案选项
          Answer: (rule, value, callback) => { 
            if (!value) { 
              return callback(new Error('答案不能为空！'))
            }
            if (!answer.test(value)) { 
              callback(new Error('请输入A-G 格式的选项！'))
            } else { 
              callback()
            }
          },
          // 身份证号码验证
          IdCard: (rule, value, callback) => { 
            if (!value) { 
              return callback(new Error('身份证号码不能为空！'))
            }
            if (!idCard.test(value)) { 
              callback(new Error('请输入正确格式的身份证号码！'))
            } else { 
              callback()
            }
          },
          // 0-100整数 百分比
          Percent: (rule, value, callback) => { 
            if (!value) { 
              return callback(new Error('请输入正确格式的百分比'))
            }
            if (!percent.test(value)) { 
              callback(new Error('请输入0-100的正整数百分比'))
            } else { 
              callback()
            }
          },
        }
      }
    
      // FromOne表单验证规则 用于FromOne个性化的校验
      FormValidate.FormOne = function() { 
        return { 
          // 姓名的验证规则
          Name: function(rule, value, callback) { 
            if (!value) { 
              return callback(new Error('姓名不能为空'))
            }
            if (!name.test(value)) { 
              callback(new Error('请输入正确姓名!'))
            } else { 
              callback()
            }
          }
        }
      }
    
      return FormValidate
    }())
    exports.FormValidate = FormValidate

2、入口文件注册（main.js）

...
    
    // 全局表单验证
    import fromCommon from "./util/fromCommon.js"
    Vue.prototype.$fromCommon = fromCommon; //from 全局验证
    
    ...

3、表单使用

addRules: { 
       tciCardNum: [{ 
          required: true,
          message: '请输入身份证号',
          validator: this.$fromCommon.FormValidate.Form().IdCaard,
          trigger: 'blur'
       }]
    }

> validator: this.$fromCommon.FormValidate.Form().IdCaard,

发表评论取消回复

表情：

评论列表（有 0 条评论，409人围观）

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

相关阅读

相关小程序form表单验证

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

朱雀/ 2023年01月06日 01:17/ 0 赞/ 453 阅读

相关 antd form表单验证，表单初始值

form.setFieldsValue(initialValues);实现设置初始默认值 form.validateFields()实现对输入的值进行验证完整代码如下：

古城微笑少年丶/ 2022年11月16日 13:42/ 0 赞/ 452 阅读

相关 form表单提交前验证

<form action="" method="post" id="login-form" onsubmit="return toVaild()"> <inp

清疚/ 2022年08月30日 11:57/ 0 赞/ 276 阅读

相关 AnjularJS 表单验证(ng-form)

在HTML中，用户通过`input`, `select`, `textarea`等元素进行输入，我们通常用表单来包装和管理这些控件。客户端表单验证非常重要，可以及时地为用户提供

客官°小女子只卖身不卖艺/ 2022年05月22日 04:34/ 0 赞/ 222 阅读

相关 ElementUI的form表单验证事件

用过了elementUi的表单验证、表单提交之后，个人觉得不是太建议使用。第一：和我们自己写js的繁琐程度差不多，第二，还要读文档增加了学习时间和成本。废话不多说，直接上

旧城等待，/ 2022年05月17日 00:43/ 0 赞/ 275 阅读

相关 HTML&CSS form表单注册页面

1、HTML的表单标签 form表单 CSS样式 HTML标签：表单标签 1、form表单的基础介绍 A.格式 <f

约定不等于承诺〃/ 2022年05月13日 08:52/ 0 赞/ 251 阅读

相关 html form表单提交验证

function check(){ var name = document.getElementById("name").value; if

红太狼/ 2022年03月28日 15:53/ 0 赞/ 404 阅读

相关 iview -- form表单验证

前言 iview中from表单的验证默认只验证string类型，这就导致number、date、array等类型的from项不能进行验证注意：Se

清疚/ 2021年09月19日 12:52/ 0 赞/ 527 阅读

相关注册全局指令（表单验证）

1). 导出验证指令对象在 `src/directives` 下新建 `validator.js` 文件，复制贴入以下代码： src/directives/valid

你的名字/ 2021年09月17日 14:20/ 0 赞/ 376 阅读

相关注册全局form表单验证工具包

1、js注册文件 let regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //机构 let email

Myth丶恋晨/ 2021年07月25日 20:59/ 0 赞/ 410 阅读