vue | async-validator 表单验证库 第三方库安装与使用
省流总结:async-validator,
安装 npm install async-validator --save
使用:import Schema from 'async-validator';
const validator = new Schema({ [modelName]: 规则 });
validator.validate({ [modelName]: 要验证的数据 }).then(验证通过的处理).catch(验证失败的处理)
验证- Promise
写法:当validator.validate
中的name(key
)
与
descriptor
中的name(key
)
相同时,就可以使用规则去验证对应的值。.then
即验证通过,.catch
即验证失败 其中有两个错误信息 errors
输出所有的错误信息 fields
提示具体哪些字段出现了问题
github地址:yiminghe/async-validator: validate form asynchronous
安装:npm install async-validator --save
使用:
1.引入Schema
2.创建 Schema 实例
3.验证:实例调用validate方法验证(两种验证方式:① 回调,② Promise)
注: descriptor,name为 key 可以任意取名,name 里的 rules 即 定义好的预设类型规则。
验证方法- Promise的写法:当 validator.validate中的name(即 key) 与 descriptor中的 name(即 key)相同时,就可以使用规则去 验证对应的值。
.then(),即验证通过
.catch(),即验证失败。其中,有两个错误信息 errors输出所有的错误信息,fields 提示具体哪些字段出现了问题。
官网给的参考代码(两种验证方法:回调/Promise):
import Schema from 'async-validator';
const descriptor = {name: {type: 'string',required: true,validator: (rule, value) => value === 'muji',},age: {type: 'number',asyncValidator: (rule, value) => {return new Promise((resolve, reject) => {if (value < 18) {reject('too young'); // reject with error message} else {resolve();}});},},
};
const validator = new Schema(descriptor);
validator.validate({ name: 'muji' }, (errors, fields) => {if (errors) {// validation failed, errors is an array of all errors// fields is an object keyed by field name with an array of// errors per fieldreturn handleErrors(errors, fields);}// validation passed
});// PROMISE USAGE
validator.validate({ name: 'muji', age: 16 }).then(() => {// validation passed or without error message
}).catch(({ errors, fields }) => {return handleErrors(errors, fields);
});
应用 例子:
innerValue 为 model 数据,itemRules为规则,
实例化一个Schema,
[modelName]:规则 ,
调用 validate 验证规则。当
validator.validate
中的name(key
)
与
descriptor
中的name(key
)
相同时,就可以使用规则去验证对应的值。.then
即验证通过,.catch
即验证失败 其中有两个错误信息errors
输出所有的错误信息fields
提示具体哪些字段出现了问题
RuleItem 规则类型,点击进去 可以查看所有的规则选项:
ValidateError、ValidateFieldsError:指明 错误信息的类型
类型:如 email,可以验证是否为正确的