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):

javascript 复制代码
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 field
    return 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,可以验证是否为正确的email格式。

相关推荐
码上暴富3 小时前
axios请求的取消
前端·javascript·vue.js
JefferyXZF4 小时前
Next.js 初识:从 React 到全栈开发的第一步(一)
前端·全栈·next.js
一只韩非子5 小时前
AI时代,程序员如何优雅地搞定页面设计?
前端·ai编程
新中地GIS开发老师5 小时前
2025Mapbox零基础入门教程(14)定位功能
前端·javascript·arcgis·gis·mapbox·gis开发·地理信息科学
tager5 小时前
Vue 3 组件开发中的"双脚本"困境
前端·vue.js·代码规范
烛阴5 小时前
Int / Floor
前端·webgl
excel5 小时前
使用 PWA 时,为什么你必须手动添加更新逻辑,否则会报错?
前端
Moment5 小时前
Node.js 这么多后端框架,我到底该用哪个?🫠🫠🫠
前端·后端·node.js
尚学教辅学习资料6 小时前
SpringBoot3.x入门到精通系列: 2.3 Web开发基础
前端·springboot·web开发
han_6 小时前
前端遇到页面卡顿问题,如何排查和解决?
前端·javascript·性能优化