资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/从0开始，编写一个验证函数（工具函数）

从0开始，编写一个验证函数（工具函数）

canger / 859人阅读

摘要：一个验证的过程，一般便是分为这几步，我们可以按照这个步骤设计出自己的验证函数。验证的方法，返回一个布尔值调用验证方法这里是调用验证函数的方法，和上面的定义结合起来。

</>复制代码 
  1. 为什么要写验证函数
  2. 将验证过程变成多个步骤
  3. 完成一个基本的验证函数
1. 为什么要写验证函数

之前写项目的时候，一般都是在登录注册，修改密码的时候有需要些正则的需求，所以每次用到的时候都是直接从前面的代码copy过去就好了，直到后台开始写后台管理系统类的项目，复制粘贴已经完全不可行了。怎么能做一个只会ctrl+c，ctrl+v的程序猿呢！简直不能忍，于是就想到了自己写一个验证函数，每次需要做验证的时候只需要调用这个函数，传入参数就可以了，想想都美滋滋。

2. 将验证过程变成多个步骤

做验证的时候我们要做的，定义验证失败后的提示，编写验证的方法，然后调用验证得到结果。
一个验证的过程，一般便是分为这几步，我们可以按照这个步骤设计出自己的验证函数。

</>复制代码 
  1. var validatorObj = {
  2.     // 验证定义
  3.     validator: {
  4.         // 验证失败后的提示
  5.         messages: {}，
  6.         // 验证的方法， 返回一个布尔值
  7.         methods: {}
  8.     }，
  9.     // 得到验证结果
  10.     checkResult: {}
  11. }
定义一些验证失败的提示

定义的错误提示可以自定义，至于{0} {1}等则是用来做一个标识符，在验证失败后会将要验证的参数替换掉标识符

</>复制代码 
  1. // 验证失败后的提示
  2. messages: {
  3.         notnull: "请输入{0}",
  4.         max: "长度最多为 {1} 个字符",
  5.         min: "长度最小为 {1} 个字符",
  6.         length: "{0}的长度在 {1} 到 {2} 个字符",
  7.         number: "{0}必须是数字",
  8.         string: "{0}必须是字母或者数字",
  9.         moblie: "{0}必须是手机或者电话号码格式",
  10.         noChinese: "{0}不能为中文",
  11.         lon: "{0}范围为-180.0～+180.0（必须输入1到10位小数）",
  12.         lat: "{0}范围为-90.0～+90.0（必须输入1到10位小数）",
  13.         url: "请输入正确的{0}访问地址",
  14.         repeat: "两次输入的{0}不一致",
  15.         email: "邮箱格式不正确",
  16.         password: "请输入由大小写字母+数字组成的6-16位密码",
  17.         fixedNum: "请输入{1}位数字"
  18.       }
定义对应的验证方法

可以看到几乎在每个验证前面都加了一个当数据为空的时候，返回为true，这是因为有的时候我们并不关心某一个数据是否填写，但一旦填写了，又要求符合某种规则。所以如果要验证非空的时候，需要使用两个验证属性。

</>复制代码 
  1. // 验证的方法， 返回一个布尔值
  2. methods: {
  3.         notnull: obj => {
  4.           return obj.value || obj.value === 0
  5.         },
  6.         max: obj => {
  7.           if (!obj.value) return true
  8.           return obj.conditions[0] >= obj.value.length
  9.         },
  10.         min: obj => {
  11.           if (!obj.value) return true
  12.           return obj.value.length >= obj.conditions[0]
  13.         },
  14.         length: obj => {
  15.           if (!obj.value) return true
  16.           return obj.conditions[0] <= obj.value.length && obj.value.length <= obj.conditions[1]
  17.         },
  18.         number: obj => {
  19.           if (!obj.value) return true
  20.           reg = /^[0-9]+.?[0-9]*$/
  21.           return reg.test(obj.value)
  22.         },
  23.         string: obj => {
  24.           if (!obj.value) return true
  25.           reg = /^[a-zA-Z0-9]+$/
  26.           return reg.test(obj.value)
  27.         },
  28.         moblie: obj => {
  29.           if (!obj.value) return true
  30.           reg = /^(1[3,5,8,7]{1}[d]{9})|(((400)-(d{3})-(d{4}))|^((d{7,8})|(d{4}|d{3})-(d{7,8})|(d{4}|d{3})-(d{3,7,8})-(d{4}|d{3}|d{2}|d{1})|(d{7,8})-(d{4}|d{3}|d{2}|d{1}))$)$/
  31.           return reg.test(obj.value)
  32.         },
  33.         noChinese: obj => {
  34.           if (!obj.value) return true
  35.           reg = /[u4e00-u9fa5]/
  36.           return !reg.test(obj.value)
  37.         },
  38.         lon: obj => {
  39.           if (!obj.value) return true
  40.           reg = /^[-+]?(0?d{1,2}.d{1,5}|1[0-7]?d{1}.d{1,10}|180.0{1,10})$/
  41.           return reg.test(obj.value)
  42.         },
  43.         lat: obj => {
  44.           if (!obj.value) return true
  45.           reg = /^[-+]?([0-8]?d{1}.d{1,10}|90.0{1,10})$/
  46.           return reg.test(obj.value)
  47.         },
  48.         url: obj => {
  49.           if (!obj.value) return true
  50.           reg = /^([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][sS]://)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~/])+$/
  51.           return reg.test(obj.value)
  52.         },
  53.         repeat: obj => {
  54.           if (!obj.value) return true
  55.           return obj.value === obj.value1
  56.         },
  57.         email: obj => {
  58.           if (!obj.value) return true
  59.           reg = /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+.)+[A-Za-z0-9]{2,3}$/
  60.           return reg.test(obj.value)
  61.         },
  62.         password: obj => {
  63.           if (!obj.value) return true
  64.           reg = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Zd]{6,16}$/
  65.           return reg.test(obj.value)
  66.         },
  67.         fixedNum: obj => {
  68.           if (!obj.value) return true
  69.           return obj.value.length === obj.conditions[0]
  70.         }
  71.       }
调用验证方法

**这里是调用验证函数的方法，和上面的定义结合起来。
传入要验证的规则，验证的值，验证的字段名字，如果有条件则加上条件数组(条件数组是需要我们自己去设计的)**

</>复制代码 
  1. /**
  2.  1.  传入验证规则，得到验证结果
  3.  2.  @param {Obj} { label, value, rules, conditions}
  4.  3.  @param {String} label: 验证的字段名称
  5.  4.  @param {String} value: 验证的值 (验证重复的时候可以添加value1属性)
  6.  5.  @param {Array} rules: 验证的规则数组 例如： ["notnull", "length"] 如果参数必填，第一个参数为notnull
  7.  6.  @param {Array} conditions: 条件字段 例如： ["2", "10"] ,则验证长度错误会提示: 密码的长度在2到10个字符,以传入数组的条件去做验证, 验证的提示{1}开始将匹配的是当前数组
  8.  7.  @return {obj} { result, message } 验证结果对象
  9.  */
  10. // 得到验证结果
  11. checkResult: function (obj) {
  12.       let result = true,
  13.           checkType, 
  14.           message = "验证成功",
  15.           validatorMethods = this.validator.methods,
  16.           validatorMessage = this.validator.messages
  17.       // 循环验证
  18.       for (let i = 0, len = obj.rules.length; i < len; i++) {
  19.         // 当验证的规则不存在，默认跳过这个验证
  20.         if (!validatorMethods[obj.rules[i]]) {
  21.           console.log(obj.rules[i] + "规则不存在")
  22.           break
  23.         }
  24.         // 得到当前验证失败信息
  25.         if (!validatorMethods[obj.rules[i]](obj)) {
  26.           checkType = obj.rules[i]
  27.           result = false
  28.           break
  29.         }
  30.       }
  31.       // 如果验证失败, 得到验证失败的结果集
  32.       if (!result) {
  33.         message = validatorMessage[checkType]
  34.         if (obj.conditions) {
  35.           obj.conditions.forEach((item, index) => {
  36.             message = message.replace("{" + (index + 1) + "}", item)
  37.           })
  38.         }
  39.         message = message.replace("{0}", obj.label)
  40.         return {result, message}
  41.       }
  42.       return {result, message}
  43.     }
3. 完整的验证函数

把上面的步骤拼在一起，就可以完成一个验证函数。具体的需求和使用，可以根据项目自定义，但思路大致是这样的。

</>复制代码 
  1. /**
  2.  * 传入验证规则，得到验证结果
  3.  * @param {Obj} { label, value, rules, conditions}
  4.  *  @param {String} label: 验证的字段名称
  5.  *  @param {String} value: 验证的值 (验证重复的时候可以添加value1属性)
  6.  *  @param {Array} rules: 验证的规则数组 例如： ["notnull", "length"] 如果参数必填，第一个参数为notnull
  7.  *  @param {Array} conditions: 条件字段 例如： ["2", "10"] ,则验证长度错误会提示: 密码的长度在2到10个字符,以传入数组的条件去做验证, 验证的提示{1}开始将匹配的是当前数组
  8.  * @return {obj} { result, message } 验证结果对象
  9.  */
  10. function validate (obj) {
  11.   let reg
  12.   const validatorObj = {
  13.     // 验证定义
  14.     validator: {
  15.       // 验证失败后的提示
  16.       messages: {
  17.         notnull: "请输入{0}",
  18.         max: "长度最多为 {1} 个字符",
  19.         min: "长度最小为 {1} 个字符",
  20.         length: "{0}的长度在 {1} 到 {2} 个字符",
  21.         number: "{0}必须是数字",
  22.         string: "{0}必须是字母或者数字",
  23.         moblie: "{0}必须是手机或者电话号码格式",
  24.         noChinese: "{0}不能为中文",
  25.         lon: "{0}范围为-180.0～+180.0（必须输入1到10位小数）",
  26.         lat: "{0}范围为-90.0～+90.0（必须输入1到10位小数）",
  27.         url: "请输入正确的{0}访问地址",
  28.         repeat: "两次输入的{0}不一致",
  29.         email: "邮箱格式不正确",
  30.         password: "请输入由大小写字母+数字组成的6-16位密码",
  31.         fixedNum: "请输入{1}位数字"
  32.       },
  33.       // 验证的方法, 返回一个布尔值
  34.       methods: {
  35.         notnull: obj => {
  36.           return obj.value || obj.value === 0
  37.         },
  38.         max: obj => {
  39.           if (!obj.value) return true
  40.           return obj.conditions[0] >= obj.value.length
  41.         },
  42.         min: obj => {
  43.           if (!obj.value) return true
  44.           return obj.value.length >= obj.conditions[0]
  45.         },
  46.         length: obj => {
  47.           if (!obj.value) return true
  48.           return obj.conditions[0] <= obj.value.length && obj.value.length <= obj.conditions[1]
  49.         },
  50.         number: obj => {
  51.           if (!obj.value) return true
  52.           reg = /^[0-9]+.?[0-9]*$/
  53.           return reg.test(obj.value)
  54.         },
  55.         string: obj => {
  56.           if (!obj.value) return true
  57.           reg = /^[a-zA-Z0-9]+$/
  58.           return reg.test(obj.value)
  59.         },
  60.         moblie: obj => {
  61.           if (!obj.value) return true
  62.           reg = /^(1[3,5,8,7]{1}[d]{9})|(((400)-(d{3})-(d{4}))|^((d{7,8})|(d{4}|d{3})-(d{7,8})|(d{4}|d{3})-(d{3,7,8})-(d{4}|d{3}|d{2}|d{1})|(d{7,8})-(d{4}|d{3}|d{2}|d{1}))$)$/
  63.           return reg.test(obj.value)
  64.         },
  65.         noChinese: obj => {
  66.           if (!obj.value) return true
  67.           reg = /[u4e00-u9fa5]/
  68.           return !reg.test(obj.value)
  69.         },
  70.         lon: obj => {
  71.           if (!obj.value) return true
  72.           reg = /^[-+]?(0?d{1,2}.d{1,5}|1[0-7]?d{1}.d{1,10}|180.0{1,10})$/
  73.           return reg.test(obj.value)
  74.         },
  75.         lat: obj => {
  76.           if (!obj.value) return true
  77.           reg = /^[-+]?([0-8]?d{1}.d{1,10}|90.0{1,10})$/
  78.           return reg.test(obj.value)
  79.         },
  80.         url: obj => {
  81.           if (!obj.value) return true
  82.           reg = /^([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][sS]://)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~/])+$/
  83.           return reg.test(obj.value)
  84.         },
  85.         repeat: obj => {
  86.           if (!obj.value) return true
  87.           return obj.value === obj.value1
  88.         },
  89.         email: obj => {
  90.           if (!obj.value) return true
  91.           reg = /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+.)+[A-Za-z0-9]{2,3}$/
  92.           return reg.test(obj.value)
  93.         },
  94.         password: obj => {
  95.           if (!obj.value) return true
  96.           reg = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Zd]{6,16}$/
  97.           return reg.test(obj.value)
  98.         },
  99.         fixedNum: obj => {
  100.           if (!obj.value) return true
  101.           return obj.value.length === obj.conditions[0]
  102.         }
  103.       }
  104.     },
  105.     // 得到验证结果
  106.     checkResult: function (obj) {
  107.       let result = true,
  108.           checkType, 
  109.           message = "验证成功",
  110.           validatorMethods = this.validator.methods,
  111.           validatorMessage = this.validator.messages
  112.       // 循环验证
  113.       for (let i = 0, len = obj.rules.length; i < len; i++) {
  114.         // 得到当前验证失败信息
  115.         if (!validatorMethods[obj.rules[i]](obj)) {
  116.           checkType = obj.rules[i]
  117.           result = false
  118.           break
  119.         }
  120.       }
  121.       // 如果验证失败, 得到验证失败的结果集
  122.       if (!result) {
  123.         message = validatorMessage[checkType]
  124.         if (obj.conditions) {
  125.           obj.conditions.forEach((item, index) => {
  126.             message = message.replace("{" + (index + 1) + "}", item)
  127.           })
  128.         }
  129.         message = message.replace("{0}", obj.label)
  130.         return {result, message}
  131.       }
  132.       return {result, message}
  133.     }
  134.   }
  135.   return validatorObj.checkResult(obj)
  136. }
  137. export default validate
使用示例 
</>复制代码 
  1. validate({label: "username", value: "admin", rules: ["notnull", "length"], conditions: ["2", "10"]}) // 验证username不为空且长度在2-10之间
  2. validate({label: "pawwword", value: "lllyh111", rules: ["notnull", "password"]}) // 验证password由大小写字母+数字组成的6-16位密码

验证返回结果大概长这样:

</>复制代码 
  1. {result: true, message: "验证成功"}
  2. {result: false, message: "验证失败提示"}
4.在页面上的使用

把函数放在全局，需要做验证的地方直接调用这个函数就ojbk了。

在Elementui中的例子 
</>复制代码 
  1.     // 检测号码
  2.     const checkMobile = (rule, value, callback) => {
  3.       let check = this.$validate({label: "号码", value, rules: ["moblie"]})
  4.       if (!check.result) {
  5.         callback(new Error(check.message))
  6.       } else {
  7.         callback()
  8.       }
  9.     }
  10.     // 检测非中文
  11.     const checkWechat = (rule, value, callback) => {
  12.       let check = this.$validate({label: "微信", value, rules: ["noChinese", "max"], conditions: [12]})
  13.       if (!check.result) {
  14.         callback(new Error(check.message))
  15.       } else {
  16.         callback()
  17.       }
  18.     }

源码---如何使用
登录-系统管理-用户管理中可看到相关验证效果

云服务器 GPU云服务器 php从0开始 从0开始学习php 汇编语言从0开始 从0开始数据分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100435.html

相关文章

  • 从0开始，编写一个验证函数（工具函数）

    摘要：一个验证的过程，一般便是分为这几步，我们可以按照这个步骤设计出自己的验证函数。验证的方法，返回一个布尔值调用验证方法这里是调用验证函数的方法，和上面的定义结合起来。 为什么要写验证函数 将验证过程变成多个步骤 完成一个基本的验证函数 1. 为什么要写验证函数 之前写项目的时候，一般都是在登录注册，修改密码的时候有需要些正则的需求，所以每次用到的时候都是直接从前面的代码copy过去...

    A Loity 评论0 收藏0

  • JavaScript 开发人员需要知道的简写技巧

    摘要：如果属性名与名相同，则可以使用简写。其它一些语言则会发出警告或错误。在中，介绍了一种名为的新数组函数，可以实现循环的简写。总结上述是一些常用的简写技巧，如果有其它未提及的简写技巧，也欢迎大家补充。 showImg(https://segmentfault.com/img/bVXdza?w=653&h=367); 本文来源于多年的 JavaScript 编码技术经验，适合所有正在使用 J...

    learn_shifeng 评论0 收藏0

  • Python

    摘要：最近看前端都展开了几场而我大知乎最热语言还没有相关。有关书籍的介绍，大部分截取自是官方介绍。但从开始，标准库为我们提供了模块，它提供了和两个类，实现了对和的进一步抽象，对编写线程池进程池提供了直接的支持。 《流畅的python》阅读笔记 《流畅的python》是一本适合python进阶的书, 里面介绍的基本都是高级的python用法. 对于初学python的人来说, 基础大概也就够用了...

    dailybird 评论0 收藏0

  • 探索两种优雅的表单验证——策略设计模式和ES6的Proxy代理模式

    原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。 在一个Web项目中，注册，登录，修改用户信息，下订单等功能的实现都离不开提交表单。这篇文章就阐述了如何编写相对看着舒服的表单验证代码。 假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。 ...

    Bamboy 评论0 收藏0

发表评论

登陆后可评论

0条评论

canger

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<