浏览器端和服务端均可以使用的验证器

最近基于本身的使用习惯和经验，写了个验证器。能够在浏览器端和 Node 环境下使用。

但这种验证器已经有很是多轮子了。。。没有特点是不行的。。。

这个验证器的特点：

1.内置规则以及可扩展规则

2.可使用逻辑操做符

3.支持一组检验规则，哪里错误就提示那里

4.小巧而且可扩展，能够用多种形式封装。

5.单元测试 100% 覆盖绿

我本身就封装了个 forms-validator，原本还想用 vue 封装个的工具的，但没时间就暂时坑了

下面来简单介绍下，不过只介绍了部分功能。所有功能介绍，请看文档。

问题

先考虑下下面的场景

1.咱们要判断，一个小于20或者大于60同时还必须为素数的数字

2.校验邮箱地址

• 当用户什么都没填，就点击提交时，提示他，‘邮箱必填’（'Required...'）
• 当用户填了些东西时，校验他是不是合法邮箱，而且是 Gmail 或者 QQ 邮箱，若是不是，点击提交时，提示‘邮箱格式有误’（'Not a valid Email'）
• 当用户邮箱填对了，而且是 Gmail 或者 QQ 邮箱了，校验他字符长度，不能超过32个字符。若是超过了，提示‘邮箱地址太长’（'Email address too long'）

开始

先安装

npm i --save validator-core

而后

import Validator from 'validator-core'
const validator = new Validator()

内置规则以及可扩展规则

详细内置规则列表，见文档

• 好比限定字串长度：

validator.test('1234', 'size:4') // => true
validator.test('12345', 'size:4') // => false
validator.test('1234', 'size:2-4') // => true
validator.test('1', 'size:2-4') // => false
validator.test(null, 'size:2-4') // => false
validator.test(123, 'size:2-4') // => false

• 判断数字大小

validator.test(200, 'lt:400') // => true
validator.test(400, 'lte:400') // => true
validator.test(401, 'gt:400') // => true

• 可扩展

好比这里我扩展了三条规则（合理扩展规则能够减小项目代码量）

使用validator.registerRules方法来进行扩展

• 'password': 校验密码是非特殊字符，而且8到16位
• 'is_prime': 判断数字是否为素数
• 'contain': 判断字串是否包含另外一个字串

const customRules = {
  'password': /^[^\s\u4E00-\u9FA5]{8,16}$/,
  'is_prime': function isPrimeNum (num, params) {
    if (params) console.log(params)
    if (typeof num !== 'number' || !Number.isInteger(num)) return false

    if (num === 2) {
      return true
    } else if (num % 2 === 0) {
      return false
    }

    const squareRoot = Math.sqrt(num)
    for (var i = 3; i <= squareRoot; i += 2) {
      if (num % i === 0) return false
    }

    return true
  },
  'contain': function (value, params) {
    if (!params) return false
    if (typeof value !== 'string') return false

    for (let i = 0; i < params.length; i++) {
      const item = params[i]
      if (value.indexOf(item) > -1) return true
    }
    return false
  }
}

validator.registerRules(customRules)

validator.test('abcd123', 'password') // => false
validator.test('abcd1234', 'password') // => true
validator.test(13, 'is_prime:just_test,hei')
// log: ['just_test', 'hei']
// => true
validator.test(24, 'is_prime') // => false

使用逻辑操做符

咱们仍是接上面的例子。可使用的逻辑操做符有 &&, || 还有括号()

操做符不只能够对内置规则使用，还能够对扩展的规则使用。还能够在一组校验规则时使用（合理运用会很是强大，下面例子会说到）。

好比说，

• 咱们要判断用户输入的邮箱（内置规则为email），是合法的，并且只支持 Gmail 和 QQ 邮箱，其余不支持
• 咱们要判断，一个小于20或者大于60同时还必须为素数的数字

validator.test('hwenleung@gmail.com', 'email && contain:gmail.com, qq.com') // => true
validator.test('hwenleung@163.com', 'email && contain:gmail.com, qq.com') // => false
validator.test('hwenleung@qq.com', 'email && contain:gmail.com, qq.com') // => true

validator.test(13, 'lt:20 || gt: 60 && is_prime') // => true
validator.test(23, 'lt:20 || gt: 60 && is_prime') // => false
validator.test(797, 'lt:20 || gt: 60 && is_prime') // => true

// 用括号来改变执行优先级
validator.test(4, 'lt:20 || (gt: 60 && is_prime)') // => true
validator.test(64, 'lt:20 || (gt: 60 && is_prime)') // => false
validator.test(797, 'lt:20 || (gt: 60 && is_prime)') // => true
validator.test(13, '((lt:20 || gt: 60) && is_prime)') // => true
validator.test(23, '((lt:20 || gt: 60) && is_prime)') // => false

支持一组检验规则，哪里错误就提示那里

继续接上面的例子。考虑如下情景：

咱们有一个输入邮箱地址的输入框。

• 当用户什么都没填，就点击提交时，提示他，‘邮箱必填’（'Required...'）
• 当用户填了些东西时，校验他是不是合法邮箱，而且是 Gmail 或者 QQ 邮箱，若是不是，提示‘邮箱格式有误’（'Not a valid Email'）
• 当用户邮箱填对了，而且是 Gmail 或者 QQ 邮箱了，校验他字符长度，不能超过32个字符。若是超过了，提示‘邮箱地址太长’（'Email address too long'）

另外我还要校验一个价格，不管他有什么错我都提示，‘通用的错误提示’（'Common Mes: Error occur'）

那么就能够用下面的代码来实现 (ruleSet)

注意，使用一组检验规则(ruleSet)时，要用validator.check而不是validator.test。

test是对单个规则用的。

// ruleSet must be an Object Array
const ruleSet = [
  {
    name: 'Email', // rule should have a unique name
    // set of rules will be checked in order
    rules: ['required', 'email && contain:gmail.com, qq.com', 'size:32'],
    // tips are one-to-one of the rules, but you can set only one tip like 'Price'
    tips: ['Required...', 'Not a valid Email', 'Email address too long']
  },
  {
    name: 'Price',
    rules: ['required', 'lt:5000'],
    // 当错误消息只有一个时，会当成默认信息
    tips: ['Common Mes: Error occur']
  }
]

const validator = new Validator(ruleSet)
// or
// const validator = new Validator()
// validator.use(ruleSet)

console.log(validator.check('', 'Email'))
// => {isError: true, isPass: false, name: 'Email', tip: 'Required...'}
console.log(validator.check('some@some', 'Email'))
// => {isError: true, isPass: false, name: 'Email', tip: 'Not a valid Email'}
console.log(validator.check('Iamveryloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo@gmail.com', 'Email'))
// => {isError: true, isPass: false, name: 'Email', tip: 'Email address too long'}
console.log(validator.check('hwenleung@gmail.com', 'Email'))
// => {isError: false, isPass: true, name: 'Email'}

最后

详细的文档及项目源码，在这里

若是有帮助的话，欢迎点个 star ~~