验证库:v8n

v8n 官网:https://imbrn.github.io/v8n/

GitHub:https://github.com/imbrn/v8n

v8n 是 validation 的缩写,是JS中一个非常好用的验证库。

为什么选择 v8n

JS 的验证库非常多,但是为什么选择使用 v8n?有以下原因:

  • 小巧精悍,几乎满足所有日常开发应用场景
  • 非常好用的链式语法
  • 支持自定义验证器
  • 异步验证
  • 验证器复用
  • 修改器支持

安装及使用

安装: yarn add v8n

使用:

const v8n = require("v8n");
// or
import v8n from "v8n";

或者在HTML中引入:

<script src="https://unpkg.com/v8n/dist/v8n.min.js"></script>

链式语法

我非常喜欢的一点就是其链式语法,比如:

v8n()
  .string()
  .first("H")
  .last("o")
  .test("Hello"); //true

验证方法

v8n 提供 test 方法和 testAll 方法对数据进行验证。区别在于:

  • test() 返回 true 或 false
  • testAll() 返回一个数组,如果所有验证都通过则得到一个空数组,如果其中有不通过的规则,则将此条规则的异常包含到数组当中
  • check() 将会返回第一个检查出来的异常

test 的例子

v8n()
  .string()
  .first("H")
  .last("o")
  .testAll("Hello"); // true
v8n()
  .string()
  .first("H")
  .last("o")
  .testAll("A"); // false

testAll 的例子

v8n()
  .string()
  .first("H")
  .last("o")
  .testAll("Hello");

以上代码将返回一个空的数组 [],因为所有的验证都通过了。

v8n()
  .string()
  .first("H")
  .last("o")
  .testAll("A");

以上代码将会返回一个包括两个异常的数组,格式如下:

[
  ValidationException: {
    rule: Rule {name: "first", fn: ƒ, args: Array(1), modifiers: Array(0)}, value: "A",
    // ...
  },
  ValidationException: {
    rule: Rule {name: "last", fn: ƒ, args: Array(1), modifiers: Array(0)},
    value: "A",
    // ...
  }
]

check 的例子

try {
  v8n()
    .string()
    .first("H")
    .last("o")
    .check("A");
} catch (e) {
  console.log(e.rule)
}

打印出的异常为:

Rule {
  name: "first",
  args: ["H"],
  // ...
}

异步验证

可以使用 testAsync 方法进行异步验证。应用场景:比如向服务器端请求验证的时候。

v8n()
  .string() // You can use regular rules too
  .checkUsernameAvailable() // This asks something from a server
  .testAsync("myUsername") // Promise return
  .then(validatedValue => validatedValue)
  .catch(exception => exception);

验证器复用

我们可以将一个验证器缓存,然后在需要使用的时候调用即可:

const val = v8n()
  .not.null()
  .min(2);
val.test(3); // True
val.test(null); // False
val.max(5).test(7); // False

修改器

在使用验证器之前,我们可以使用修改器进行操作,比如:

v8n()
  .not.null()
  .test(2); // True, 2 isn't null
v8n()
  .every.number()
  .test([1, 2, "hello"]); // False, hello isn't a number
v8n()
  .some.number()
  .test([1, 2, "hello"]); // True, there is at least one number

v8n 内置的修改器有:

  • not 否定前缀
  • every 所有验证数据通过才 true
  • some 部分验证数据通过就 true

自定义验证规则

可以使用 v8n.extend 为 v8n 扩展规则:

v8n.extend({
  isEmptyObject: () => {
    return value => '{}' === JSON.stringify(value)
  }
});
console.log(
  v8n()
    .isEmptyObject()
    .test({}) // true
)
console.log(
  v8n()
    .isEmptyObject()
    .test({a:1}) // false
)

又比如:

v8n.extend({
  isIncludeChar: char => {
    return value => value.indexOf(char) > -1
  }
});
console.log(
  v8n()
    .isIncludeChar('a')
    .test('abcde') // true
)
console.log(
  v8n()
    .isIncludeChar('f')
    .test('abcde') // false
)

v8n.extend 扩展的方法支持传递一个参数,返回值的是一个闭包函数,这个函数接受一个参数,是 test() 传入的参数。

甚至可以定义异步验证器:

const myAsyncCustomRule = expected => {
  return value => {
    // fetches data from an api, for example, and resolves with the result
    const result = fetch("some API call");
    return Promise.resolve(result == expected);
  };
};
v8n.extend({ myAsyncCustomRule });

组合验证

可以使用 schema 对一个对象进行包装组合验证:

const validation = v8n().schema({
  id: v8n()
    .number()
    .positive(),
  name: v8n()
    .string()
    .minLength(4)
});
validation.test({
  id: 1,
  name: "Luke"
}); // true
validation.test({
  id: -1,
  name: "Luke"
}); // false

内置验证

数据类型的验证

  • string
  • number
  • boolean
  • undefined
  • null
  • array
  • object

比如:

v8n().string().test("Hello"); // true
v8n().string().test(123); // false
v8n().number().test(123); // true
v8n().number().test("Hello"); // false
v8n().boolean().test(22); // false
v8n().boolean().test(false); // true
v8n().undefined().test("something"); // false
v8n().undefined().test(undefined); // true
v8n().undefined().test(); // true
v8n().null().test(123); // false
v8n().null().test(null); // true
v8n().array().test("hello"); // false
v8n().array().test([1, 2, 3]); // true
v8n().object().test("hello"); // false
v8n().object().test({ key: "value" }); // true

常规验证

  • empty 验空

比如:

v8n().empty().test(""); // true
v8n().empty().test([]) // true
v8n().empty().test({}) // false
v8n().empty().test([1, 2]); // false
  • length 验证长度,可以使一个确定的值也可以是一个区间
  • minLength 验证最小长度
  • maxLength 验证最大长度

比如:

v8n().length(3, 5).test([1, 2, 3, 4]); // true
v8n().length(3).test([1, 2, 3, 4]); // false
v8n().minLength(3).test([1, 2, 3, 4]); // true
v8n().minLength(3).test([1, 2]); // false
v8n().maxLength(3).test([1, 2]); // true
v8n().maxLength(3).test([1, 2, 3, 4]); // false
  • includes 包含验证

比如:

v8n().includes(2).test([1, 2, 3]); // true
v8n().includes("a").test("Hello"); // false

比较验证

  • equal 等于,会隐式转化
  • exact 等于,不会隐式转化

比如:

v8n().equal(10).test("10"); // true
v8n().equal("Hello").test("Another"); // false
v8n().exact(10).test("10"); // false
v8n().exact("Hello").test("Hello"); // true

字符串验证

  • lowercase 是否是小写
  • uppercase 是否是大写
  • first 验证第一个字母是否是指定字母
  • last 验证最后一个字母是否是指定字母

比如:

v8n().lowercase().test("hello"); // true
v8n().lowercase().test("Hello"); // false
v8n().uppercase().test("HELLO"); // true
v8n().uppercase().test("Hello"); // false
v8n().first("H").test("Hello"); // true
v8n().first("A").test("Hello"); // false
v8n().first("One").test(["One", "Two", "Three"]); // true
v8n().first(10).test([0, 10, 20]); // false
v8n().last("o").test("Hello"); // true
v8n().last("A").test("Hello"); // false
v8n().last("Three").test(["One", "Two", "Three"]); // true
v8n().last(10).test([0, 10, 20]); // false

数值的验证

  • negative 负数验证
  • positive 正数验证
  • between 验证是否在两个指定的值之间,别名为 range
  • lessThan 小于
  • lessThanOrEqual 小于等于
  • greaterThan 大于
  • greaterThanOrEqual 大于等于
  • even 偶数
  • odd 奇数
  • integer 整数

比如:

v8n().negative().test(-1); // true
v8n().negative().test(0); // false
v8n().positive().test(1); // true
v8n().positive().test(-1); // false
v8n().between(1, 3).test(2); // true
v8n().between(1, 3).test(4); // false
v8n().lessThan(10).test(9); // true
v8n().lessThan(10).test(10); // false
v8n().lessThanOrEqual(10).test(10); // true
v8n().lessThanOrEqual(10).test(11); // false
v8n().greaterThan(10).test(11); // true
v8n().greaterThan(10).test(10); // false
v8n().greaterThanOrEqual(10).test(10); // true
v8n().greaterThanOrEqual(10).test(9); // false
v8n().even().test(40); // true
v8n().even().test(21); // false
v8n().odd().test(20); // false
v8n().odd().test(9); // true
v8n().integer().test(20); // true
v8n().integer().test(2.2); // false

正则验证: pattern

比如:

v8n()
  .pattern(/[a-z]+/)
  .test("hello"); // true
v8n()
  .pattern(/[0-9]/)
  .test("hello"); // false

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress