`async-validator` 是一个轻量级、功能强大的异步验证库，主要用于前端开发中对用户输入的数据进行校验。它支持同步和异步规则配置，并且易于集成到各种应用程序中，包括 Vue 和 React 等现代 JavaScript 框架。以下是关于 `async-validator` 的详细介绍：
### 基本特点
- **简单易用**：API 设计简洁直观，能够快速上手；
- **多种内置规则**：提供丰富的预定义验证规则如必填项 (required)、最小长度(minLength)、最大长度(maxLength)，正则表达式(pattern)等；
- **自定义规则**：允许开发者创建复杂的业务逻辑作为验证条件；
- **国际化支持**：可以轻松地为错误消息添加多语言翻译；
- **异步验证能力**：通过 Promise 实现非阻塞的远程 API 校验等功能；
### 安装与引入
你可以使用 npm 或 yarn 来安装此库:
```bash
npm install async-validator --save
# 或者
yarn add async-validator
```
然后在你的项目文件里按需加载模块:
```javascript
import Validator from 'async-validator';
// 或者直接全局引用
const Validator = require('async-validator');
```
### 示例代码
下面是一个简单的例子来演示如何使用 `async-validator` 进行表单字段的有效性检查。
#### 同步验证示例
```javascript
let descriptor = {
username: [
{ required: true, message: "用户名不能为空" },
{ type: 'string', min: 3, max: 10, message: "用户名长度应在3~10之间"}
],
password: [
{ required: true, message: "密码不能为空"},
{ pattern: /^[A-Za-z\d]{6,}$/, message: "密码只能包含字母数字组合，最少六位"}
]
};
let validator = new Validator(descriptor);
validator.validate({
username: '',
password: ''
}, function(errors){
if (errors)
console.log("验证失败:", errors);
else
console.log("验证成功！");
});
```
#### 异步验证示例
当涉及到像邮箱可用性的实时检测这样的场景时，我们可以利用它的异步特性来进行操作。
```javascript
let descriptor = {
email: [{
required: true,
type: 'email',
message: '请输入正确的电子邮件地址'
}, {
// 自定义异步验证函数
asyncValidator(rule, value, callback) {
setTimeout(() => {
if (!value || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
return callback(new Error('无效邮件'));
// Simulate an AJAX call to check availability.
fetch('/api/check-email?email=' + encodeURIComponent(value))
.then(response => response.json())
.then(data => {
data.available ? callback() : callback(new Error('该电子信箱已被注册'))
})
.catch(callback);
}, 500); // simulate delay for demo purposes only
}
}]
};
let validator = new Validator(descriptor);
validator.validate({ email: '' }, function(errorMessages) {
console.log(errorMessages);
});
```
### 配置选项解析
| 参数 | 描述 |
|---|---|
| rule.required | 字段是否必需，默认 false |
| rule.type | 数据类型的限定，比如 string, number, object, array, boolean, enum, integer, float, method, regexp, date 等 |
| rule.message | 错误提示信息模板字符串 |
| rule.pattern | 正则表达式的实例或者源码串形式 |
| rule.min/max | 数字型数据范围限制 |
| rule.len | 字符串或数组的最大长度 |
除了上述提到的基础设置外还有更多高级配置可供探索，具体详情参阅[官方文档](https://github.com/yiminghe/async-validator/blob/master/API.md).
扫一扫
796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
