简介
westmoreland-validation 是一个轻量级的前端表单校验工具库，它可以帮助你快速实现表单的验证功能，并提供了多种校验规则供选择。
安装
您可以使用 npm 包管理器来安装该工具库：
npm install westmoreland-validation
使用
引入
首先，您需要引入该工具库：
import { Validator } from 'westmoreland-validation'Validator 类即为本工具库的核心类，集成了各种校验规则和校验方法。
创建实例
接下来，您需要创建一个 Validator 实例：
const validator = new Validator()
当然，您也可以在创建实例时传入一些参数来进行自定义：
-- -------------------- ---- -------
----- --------- - --- -----------
------ -
-- -----
----------- ----- -- ------------------
--
--------- -
-- ---------
----------- ----- --- -------
-
--添加规则
有了实例之后，您就可以往里面添加校验规则了。
内置规则
Validator 实例已经内置了一些常用的校验规则，例如：
required：字段必填email：邮箱格式校验phone：手机号格式校验url：URL 地址格式校验number：数字格式校验
您可以使用 setRule 方法来添加规则：
validator.setRule('required', value => !!value, '字段不能为空')
validator.setRule('email', value => /^[\w-]+(\.[\w-]+)*@[a-z0-9]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/.test(value), '请输入正确的邮箱地址')setRule 方法接受三个参数：
name：规则名称handler：规则的校验方法message：规则的错误提示信息
自定义规则
除了使用内置规则，您还可以自己定义一些特殊的规则。例如，您需要校验一个元素的值是否至少包含两个数字：
-- -------------------- ---- -------
--------------------------------------- ----- -- -
--- ----- - -
--- ---- - - -- - - ------------- ---- -
-- ----------------------------- -
-------
-
-
------ ----- -- -
-- ------------校验
有了规则之后，您就可以开始进行表单校验了。检查表单时，您需要提供某个字段的值和该字段的校验规则：
const result = validator.check('email', 'test@example.com', ['required', 'email'])check 方法接受三个参数：
field：字段名称value：字段的值rules：字段的校验规则，可以为一个数组，也可以为多个参数
该方法将返回一个对象：
{
valid: false, // 是否校验通过
message: '请输入 e-mail 地址' // 错误提示信息，如果校验通过则为空字符串
}除了 check 方法，Validator 实例还提供了 checkAll 方法，用于检查多个字段的值：
const result = validator.checkAll({
email: 'test@example.com',
password: 'password123'
}, {
email: ['required', 'email'],
password: ['required', { min: 8 }]
})checkAll 方法接受两个参数：
fields：多个字段的值rules：多个字段的校验规则，以一个对象的形式传入，键名表示字段名称，键值为校验规则
该方法将返回一个对象：
{
valid: false, // 是否校验通过
errors: {
email: '请输入 e-mail 地址', // 单个字段的错误提示信息
password: '密码长度不能少于 8 位'
}
}自定义错误提示信息
Validator 实例也允许您自定义各个校验规则的错误提示信息，例如：
validator.setMessage('required', '{field}不能为空')上述代码会将 required 规则的提示信息设为 {field}不能为空，其中 {field} 会被替换为对应字段的名称。
示例代码
请看下面这个简单的示例，它展示了如何使用 westmoreland-validation 来实现表单验证：
-- -------------------- ---- ------- ---- ---- -- --- ------ ------ ----------------------- ------ ----------- ---------- ------------- ----- ----------------- ---------------------- ---- ------ -------------------------- ------ --------------- ------------- ---------------- ----- ----------------- ------------------------- ---- ------- ------------------------- -------
-- -------------------- ---- -------
-- ---------- --
------ - --------- - ---- -------------------------
----- --------- - --- -----------
----------------------------- ----- -- -------- ---------
-------------------------- ----- -- ------------------------------------------------------------------------ -------------
----------------------------- ----- -- ------------ -- -- --------- - ---
-------------------------------- --------------
----- ------- - --------------------------------
----- ---------- - ------------------------------------
----- ---------- - -----------------------------------
----- ------------- - ---------------------------------------
-------------------------------- -- -- -
----- ------ - ------------------------ -------------- ------------ ---------
-- --------------- -
---------------------- - --------------
- ---- -
---------------------- - --
-
--
----------------------------------- -- -- -
----- ------ - --------------------------- ----------------- ------------ ------------
-- --------------- -
------------------------- - --------------
- ---- -
------------------------- - --
-
--
--------------------------------------------------------- - -- -
----- ------ - --------------------
------ --------------
--------- ----------------
-- -
------ ------------ ---------
--------- ------------ -----------
--
-- --------------- -
------------------
---------------------- - ------------------- -- --
------------------------- - ---------------------- -- --
-
--结语
如上所述，westmoreland-validation 是一个简单易用的前端表单校验工具库。期望本文能帮助您更好地了解和使用该工具库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671078dd3466f61ffdeac