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

时间  2019-11-07
标签 开始 编写 一个 验证 函数 工具 繁體版
原文   原文链接
  • 为何要写验证函数
  • 将验证过程变成多个步骤
  • 完成一个基本的验证函数

1. 为何要写验证函数

以前写项目的时候，通常都是在登陆注册，修改密码的时候有须要些正则的需求，因此每次用到的时候都是直接从前面的代码copy过去就行了，直到后台开始写后台管理系统类的项目，复制粘贴已经彻底不可行了。怎么能作一个只会ctrl+c，ctrl+v的程序猿呢！简直不能忍，因而就想到了本身写一个验证函数，每次须要作验证的时候只须要调用这个函数，传入参数就能够了，想一想都美滋滋。git

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

作验证的时候咱们要作的，定义验证失败后的提示，编写验证的方法，而后调用验证获得结果。 一个验证的过程，通常即是分为这几步，咱们能够按照这个步骤设计出本身的验证函数。github

var validatorObj = {
    // 验证定义
    validator: {
        // 验证失败后的提示
        messages: {}，
        // 验证的方法， 返回一个布尔值
        methods: {}
    }，
    // 获得验证结果
    checkResult: {}
}
复制代码

定义一些验证失败的提示

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

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

定义对应的验证方法

能够看到几乎在每一个验证前面都加了一个当数据为空的时候，返回为true，这是由于有的时候咱们并不关心某一个数据是否填写，但一旦填写了，又要求符合某种规则。因此若是要验证非空的时候，须要使用两个验证属性。bash

// 验证的方法， 返回一个布尔值
methods: {
        notnull: obj => {
          return obj.value || obj.value === 0
        },
        max: obj => {
          if (!obj.value) return true
          return obj.conditions[0] >= obj.value.length
        },
        min: obj => {
          if (!obj.value) return true
          return obj.value.length >= obj.conditions[0]
        },
        length: obj => {
          if (!obj.value) return true
          return obj.conditions[0] <= obj.value.length && obj.value.length <= obj.conditions[1]
        },
        number: obj => {
          if (!obj.value) return true
          reg = /^[0-9]+.?[0-9]*$/
          return reg.test(obj.value)
        },
        string: obj => {
          if (!obj.value) return true
          reg = /^[a-zA-Z0-9]+$/
          return reg.test(obj.value)
        },
        moblie: obj => {
          if (!obj.value) return true
          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}))$)$/
          return reg.test(obj.value)
        },
        noChinese: obj => {
          if (!obj.value) return true
          reg = /[\u4e00-\u9fa5]/
          return !reg.test(obj.value)
        },
        lon: obj => {
          if (!obj.value) return true
          reg = /^[\-\+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,10}|180\.0{1,10})$/
          return reg.test(obj.value)
        },
        lat: obj => {
          if (!obj.value) return true
          reg = /^[\-\+]?([0-8]?\d{1}\.\d{1,10}|90\.0{1,10})$/
          return reg.test(obj.value)
        },
        url: obj => {
          if (!obj.value) return true
          reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
          return reg.test(obj.value)
        },
        repeat: obj => {
          if (!obj.value) return true
          return obj.value === obj.value1
        },
        email: obj => {
          if (!obj.value) return true
          reg = /^([-_A-Za-z0-9\.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/
          return reg.test(obj.value)
        },
        password: obj => {
          if (!obj.value) return true
          reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,16}$/
          return reg.test(obj.value)
        },
        fixedNum: obj => {
          if (!obj.value) return true
          return obj.value.length === obj.conditions[0]
        }
      }
复制代码

调用验证方法

这里是调用验证函数的方法，和上面的定义结合起来。 传入要验证的规则，验证的值，验证的字段名字，若是有条件则加上条件数组(条件数组是须要咱们本身去设计的)微信

/**
 1.  传入验证规则，获得验证结果
 2.  @param {Obj} { label, value, rules, conditions}
 3.  @param {String} label: 验证的字段名称
 4.  @param {String} value: 验证的值 (验证重复的时候能够添加value1属性)
 5.  @param {Array} rules: 验证的规则数组 例如： ['notnull', 'length'] 若是参数必填，第一个参数为notnull
 6.  @param {Array} conditions: 条件字段 例如： ['2', '10'] ,则验证长度错误会提示: 密码的长度在2到10个字符,以传入数组的条件去作验证, 验证的提示{1}开始将匹配的是当前数组
 7.  @return {obj} { result, message } 验证结果对象
 */
// 获得验证结果
checkResult: function (obj) {
      let result = true,
          checkType, 
          message = '验证成功',
          validatorMethods = this.validator.methods,
          validatorMessage = this.validator.messages
      // 循环验证
      for (let i = 0, len = obj.rules.length; i < len; i++) {
        // 当验证的规则不存在，默认跳过这个验证
        if (!validatorMethods[obj.rules[i]]) {
          console.log(obj.rules[i] + '规则不存在')
          break
        }
        // 获得当前验证失败信息
        if (!validatorMethods[obj.rules[i]](obj)) {
          checkType = obj.rules[i]
          result = false
          break
        }
      }
      // 若是验证失败, 获得验证失败的结果集
      if (!result) {
        message = validatorMessage[checkType]
        if (obj.conditions) {
          obj.conditions.forEach((item, index) => {
            message = message.replace('{' + (index + 1) + '}', item)
          })
        }
        message = message.replace('{0}', obj.label)
        return {result, message}
      }

      return {result, message}
    }
复制代码

3. 完整的验证函数

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

/**
 * 传入验证规则，获得验证结果
 * @param {Obj} { label, value, rules, conditions}
 *  @param {String} label: 验证的字段名称
 *  @param {String} value: 验证的值 (验证重复的时候能够添加value1属性)
 *  @param {Array} rules: 验证的规则数组 例如： ['notnull', 'length'] 若是参数必填，第一个参数为notnull
 *  @param {Array} conditions: 条件字段 例如： ['2', '10'] ,则验证长度错误会提示: 密码的长度在2到10个字符,以传入数组的条件去作验证, 验证的提示{1}开始将匹配的是当前数组
 * @return {obj} { result, message } 验证结果对象
 */
function validate (obj) {
  let reg
  const validatorObj = {
    // 验证定义
    validator: {
      // 验证失败后的提示
      messages: {
        notnull: '请输入{0}',
        max: '长度最多为 {1} 个字符',
        min: '长度最小为 {1} 个字符',
        length: '{0}的长度在 {1} 到 {2} 个字符',
        number: '{0}必须是数字',
        string: '{0}必须是字母或者数字',
        moblie: '{0}必须是手机或者电话号码格式',
        noChinese: '{0}不能为中文',
        lon: '{0}范围为-180.0～+180.0（必须输入1到10位小数）',
        lat: '{0}范围为-90.0～+90.0（必须输入1到10位小数）',
        url: '请输入正确的{0}访问地址',
        repeat: '两次输入的{0}不一致',
        email: '邮箱格式不正确',
        password: '请输入由大小写字母+数字组成的6-16位密码',
        fixedNum: '请输入{1}位数字'
      },
      // 验证的方法, 返回一个布尔值
      methods: {
        notnull: obj => {
          return obj.value || obj.value === 0
        },
        max: obj => {
          if (!obj.value) return true
          return obj.conditions[0] >= obj.value.length
        },
        min: obj => {
          if (!obj.value) return true
          return obj.value.length >= obj.conditions[0]
        },
        length: obj => {
          if (!obj.value) return true
          return obj.conditions[0] <= obj.value.length && obj.value.length <= obj.conditions[1]
        },
        number: obj => {
          if (!obj.value) return true
          reg = /^[0-9]+.?[0-9]*$/
          return reg.test(obj.value)
        },
        string: obj => {
          if (!obj.value) return true
          reg = /^[a-zA-Z0-9]+$/
          return reg.test(obj.value)
        },
        moblie: obj => {
          if (!obj.value) return true
          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}))$)$/
          return reg.test(obj.value)
        },
        noChinese: obj => {
          if (!obj.value) return true
          reg = /[\u4e00-\u9fa5]/
          return !reg.test(obj.value)
        },
        lon: obj => {
          if (!obj.value) return true
          reg = /^[\-\+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,10}|180\.0{1,10})$/
          return reg.test(obj.value)
        },
        lat: obj => {
          if (!obj.value) return true
          reg = /^[\-\+]?([0-8]?\d{1}\.\d{1,10}|90\.0{1,10})$/
          return reg.test(obj.value)
        },
        url: obj => {
          if (!obj.value) return true
          reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
          return reg.test(obj.value)
        },
        repeat: obj => {
          if (!obj.value) return true
          return obj.value === obj.value1
        },
        email: obj => {
          if (!obj.value) return true
          reg = /^([-_A-Za-z0-9\.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/
          return reg.test(obj.value)
        },
        password: obj => {
          if (!obj.value) return true
          reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,16}$/
          return reg.test(obj.value)
        },
        fixedNum: obj => {
          if (!obj.value) return true
          return obj.value.length === obj.conditions[0]
        }
      }
    },
    // 获得验证结果
    checkResult: function (obj) {
      let result = true,
          checkType, 
          message = '验证成功',
          validatorMethods = this.validator.methods,
          validatorMessage = this.validator.messages
      // 循环验证
      for (let i = 0, len = obj.rules.length; i < len; i++) {
        // 获得当前验证失败信息
        if (!validatorMethods[obj.rules[i]](obj)) {
          checkType = obj.rules[i]
          result = false
          break
        }
      }
      // 若是验证失败, 获得验证失败的结果集
      if (!result) {
        message = validatorMessage[checkType]
        if (obj.conditions) {
          obj.conditions.forEach((item, index) => {
            message = message.replace('{' + (index + 1) + '}', item)
          })
        }
        message = message.replace('{0}', obj.label)
        return {result, message}
      }

      return {result, message}
    }
  }
  return validatorObj.checkResult(obj)
}

export default validate

复制代码

使用示例

validate({label: 'username', value: 'admin', rules: ['notnull', 'length'], conditions: ['2', '10']}) // 验证username不为空且长度在2-10之间
validate({label: 'pawwword', value: 'lllyh111', rules: ['notnull', 'password']}) // 验证password由大小写字母+数字组成的6-16位密码
复制代码

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

{result: true, message: '验证成功'}
{result: false, message: '验证失败提示'}
复制代码

4.在页面上的使用

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

在Elementui中的例子

// 检测号码
    const checkMobile = (rule, value, callback) => {
      let check = this.$validate({label: '号码', value, rules: ['moblie']})
      if (!check.result) {
        callback(new Error(check.message))
      } else {
        callback()
      }
    }
    // 检测非中文
    const checkWechat = (rule, value, callback) => {
      let check = this.$validate({label: '微信', value, rules: ['noChinese', 'max'], conditions: [12]})
      if (!check.result) {
        callback(new Error(check.message))
      } else {
        callback()
      }
    }
复制代码

源码---如何使用url

页面效果--登陆-系统管理-用户管理中可看到相关验证效果spa

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程