简介
aragonite-form-validator 是一个基于 JavaScript 的表单验证库，用于在前端进行表单验证。它提供了多种验证规则，并可以自定义验证规则，支持异步验证和本地化消息。
在本教程中，我们将详细介绍如何使用 aragonite-form-validator。
安装
你可以使用 npm 或 yarn 安装该库：
npm install aragonite-form-validator
或
yarn add aragonite-form-validator
基本用法
首先，需要引入 aragonite-form-validator：
import Validator from 'aragonite-form-validator';
然后，可以创建一个 Validator 实例：
const validator = new Validator();
接下来，可以使用 addRule 方法添加验证规则，并使用 validate 方法进行验证。例如，我们可以验证一个字段是否为必填项：
validator.addRule('required', (value) => value !== '', '该字段不能为空'); validator.validate('required', ''); // 返回 { isValid: false, message: '该字段不能为空' } validator.validate('required', 'hello'); // 返回 { isValid: true, message: '' }
支持的验证规则
aragonite-form-validator 支持多种验证规则，包括：
- required：必填项。
- email：邮箱地址。
- url：URL 地址。
- maxLength：最大长度。
- minLength：最小长度。
- pattern：正则表达式。
- equalTo：与另一个字段相等。
- notEqualTo：与另一个字段不相等。
- integer：整数。
- float：浮点数。
- number：数字。
- digits：数字和标点符号。
- creditCard：信用卡号。
- date：日期。
- time：时间。
- dateTime：日期时间。
所有验证规则都可以使用 addRule 方法添加，并且可以自定义验证函数和错误消息。
异步验证
aragonite-form-validator 还支持异步验证。例如，我们可以验证一个邮箱地址是否已经被注册：
validator.addRuleAsync('uniqueEmail', async (value) => { const response = await fetch(`/api/check-email?email=${value}`); return response.status === 200; }, '该邮箱已被注册'); await validator.validateAsync('uniqueEmail', 'john@example.com'); // 返回 { isValid: true, message: '' }
在上面的例子中，addRuleAsync 方法用于添加异步验证规则，它需要一个异步验证函数作为第二个参数，并且需要指定错误消息。
本地化消息
aragonite-form-validator 支持本地化消息。你可以通过传递一个包含错误消息的对象来设置错误消息。例如：
-- -------------------- ---- ------- ----- -------- - - --------- ------- ------ ------------- ---- ------- --- ---- ---------- ------- ----- ----- ---------- ------- ----- ----- -------- -------- -------- ---------- ----------- ----------- -------- -------- ------ --------- ------- -------- ------- -------------- ----------- ---------- ----- ---------- ----- ---------- --------- ------------ ------------ --------- -- ----- --------- - --- ----------- -------- ---展开代码
示例代码
下面是一个完整的示例代码，演示了如何使用 aragonite-form-validator 进行表单验证：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------- ------- ------ ----- ---------- --- ------ ----------------------- ------ ----------- ------------ ----------- ---- -- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
