async-validator --- 中文文档

目录

async-validator

Install

Usage

API

Validate

Rules

Type 内置类型

Required

Pattern

Range

Length

Enumerable

Whitespace

Deep Rules 深层规则

defaultField 默认字段

Transform 变换

Messages 提示信息

asyncValidator 异步校验函数

validator 校验函数

FAQ


async-validator

一个用于表单异步校验的库,参考了 ​ ​https://github.com/freeformsystems/async-validate​​

API
下述内容来自于 ​ ​async-validate​​. 的早期版本

Usage 使用方法
基本的使用方法:定义一个 descriptor,将它传入 schema,得到一个 validator。将需要校验的对象和回调传入 validator.validate 方法中。

注:descriptor 是对校验规则的描述,validator 是根据校验规则得到的校验器

Install

npm i async-validator

Usage

基本的使用方法:定义一个 descriptor,将它传入 schema,得到一个 validator。将需要校验的对象和回调传入 validator.validate 方法中。

var schema = require('async-validator');
var descriptor = {
  name: {
    type: "string",
    required: true,
    validator: (rule, value) => value === 'muji',
  },
};
var 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

    // 校验未通过的情况,errors 是所有错误的数组
    // fields 是一个 object,以字段作为 key 值,该字段对应的错误数组作为 value
    // (其实 fields 就是把 errors 按照原对象的 key 值分组)

    return handleErrors(errors, fields);
  }

  // validation passed
  // 这里说明校验已通过
});

// PROMISE USAGE
// Promise 式用法

validator.validate({
  name: "muji",
  asyncValidator: (rule, value) => axios.post('/nameValidator', { name: value }),
}, (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

    // 校验未通过的情况,errors 和 fields 同上
    return handleErrors(errors, fields);
  }
  // validation passed
  // 校验通过
})
  .then(() => {
    // validation passed
  // 校验通过
  })
  .catch(({ errors, fields }) => {
    return handleErrors(errors, fields);
  })

API

Validate

function(source, [options], callback): Promise
  • ​​source​​: 需要校验的对象(必填).
  • ​​options​​: 校验选项(可选).
  • ​​callback​​: 校验完成时的回调(必填).

方法返回一个 Promise 对象:

  • ​​then()​​,说明校验通过
  • ​​catch({ errors, fields })​​,校验未通过,errors, fields 含义见前面示例

Options 选项

suppressWarning: 布尔值,是否抑制有关无效值的内部警告。

first: 布尔值,当第一个验证规则生成错误时调用回调函数,不再处理更多的验证规则。如果您的验证涉及多个异步调用(例如数据库查询)并且只需要第一个错误,请使用此选项。

firstFields: 布尔值|字符串数组,当指定字段的第一个验证规则生成错误时调用回调函数,不再处理同一字段的更多验证规则。true 表示所有字段。

Rules


Rules 也可以是用于校验的函数

function(rule, value, callback, source, options)
  • ​​rule​​: 当前校验字段在 descriptor 中所对应的校验规则,其中的 field 属性是当前正在校验字段的名称
  • ​​value​​: 当前校验字段的值
  • ​​callback​​​: 在校验完成时的回调,传入​​Error​​​ [或者是一个数组] 代表校验失败,如果校验是同步的话,直接返回​​false​​​ 或​​Error​​​ 或​​Error​​​ 数组也可以(注:异步校验通过时直接不带参数调用​​callback()​​,代表没有错误)
  • ​​source​​​: 传入​​validate​​ 方法的 object,也就是需要校验的对象
  • ​​options​​: 传入的额外选项
  • ​​options.messages​​: 对象包含的校验错误提示信息,会被合并到默认的提示信息中
  • 传入 ​​validate​​​ 或 ​​asyncValidate​​​ 的 options 被带到了校验函数中,以便你可以在校验函数中拿到数据(比如 model 引用)。然而,option中部分属性名是被保留的,你如果使用了的话会被覆盖掉,其中包括 ​​messages​​​, ​​exception​​​ 和 ​​error​​。
var schema = require('async-validator');
var descriptor = {
  name(rule, value, callback, source, options) {
    var errors = [];
    if(!/^[a-z0-9]+$/.test(value)) {
      errors.push(
        new Error(
          util.format("%s must be lowercase alphanumeric characters",
            rule.field)));
    }
    return errors;
  }
}
var validator = new schema(descriptor);
validator.validate({name: "Firstname"}, (errors, fields) => {
  if(errors) { 
    return handleErrors(errors, fields);
  }
  // validation passed
});

在需要对一个字段设置多条校验规则时,可以把规则设为一个数组,比如

var descriptor = {
  email: [
    {type: "string", required: true, pattern: schema.pattern.email},
    {validator(rule, value, callback, source, options) {
      var errors = [];
      // test if email address already exists in a database
      // and add a validation error to the errors array if it does
      return errors;
    }}
  ]
}

Type 内置类型


下列是 ​​type​​ 可用的值:

  • ​​string​​​: 必须是​​string​​​.​​This is the default type.​​
  • ​​number​​​: 必须是​​number​​.
  • ​​boolean​​​: 必须是​​boolean​​.
  • ​​method​​​: 必须是​​function​​.
  • ​​regexp​​​: 必须是正则或者是在调用​​new RegExp​​ 时不报错的字符串.
  • ​​integer​​: 整数.
  • ​​float​​: 浮点数.
  • ​​array​​​: 必须是数组,通过​​Array.isArray​​ 判断.
  • ​​object​​: 是对象且不为数组.
  • ​​enum​​​: 值必须出现在​​enmu​​ 枚举值中.
  • ​​date​​​: 合法的日期,使用​​Date​​ 判断
  • ​​url​​: url.
  • ​​hex​​: 16进制.
  • ​​email​​: 邮箱地址.

Required

​​required​​ 属性代表这个字段必须出现在对象中

Pattern

​​pattern​​ 属性代表需要符合的正则

Range

使用 ​​min​​​ 和 ​​max​​​ 属性定义范围,对于字符串和数组会与 ​​value.length​​ 比较,对于数字会直接与值比较

Length

使用 ​​len​​ 属性直接指定长度,会与字符串和数组的 ​​value.length​​ 比较相等,对于数字会直接与值比较是否相等

如果 ​​len​​ 与 ​​min​​ 和 ​​max​​ 同时使用, ​​len​​ 优先。

Enumerable

可枚举值

对于可以枚举出所有情况的类型,可以使用枚举校验,如下:


Whitespace

把仅包含空格的字段视为错误是很典型的做法,为了额外测试字段是否只有空格,添加 ​​whitespace​​​ 属性并设为true。这个属性要求字段必须为 ​​string​​ 类型。

如果你想要修正用户的输入而不是测试有无空格,查看 transform 中去除空格的例子。

const descriptor = {
  role: { type: 'enum', enum: ['admin', 'user', 'guest'] },
};

Deep Rules 深层规则

如果需要校验一个深层的对象,你需要使用 ​​fields​​ 属性来设置嵌套的规则

var descriptor = {
  address: {
    type: "object", required: true,
    fields: {
      street: {type: "string", required: true},
      city: {type: "string", required: true},
      zip: {type: "string", required: true, len: 8, message: "invalid zip"}
    }
  },
  name: {type: "string", required: true}
}
var validator = new schema(descriptor);
validator.validate({ address: {} }, (errors, fields) => {
  // errors for address.street, address.city, address.zip
});

请注意,如果您在父规则上没有指定所需的属性,那么在源对象上可能没有声明该字段,深度验证规则将不会被执行,因为没有东西可以进行验证。

深度规则验证会为嵌套规则创建模式,因此您还可以指定传递给schema.validate()方法的选项。

const descriptor = {
  address: {
    type: 'object',
    required: true,
    options: { first: true },
    fields: {
      street: { type: 'string', required: true },
      city: { type: 'string', required: true },
      zip: { type: 'string', required: true, len: 8, message: 'invalid zip' },
    },
  },
  name: { type: 'string', required: true },
};
const validator = new Schema(descriptor);

validator.validate({ address: {} })
  .catch(({ errors, fields }) => {
    // now only errors for street and name    
  });

如果你像下面这样写,父规则也会被校验

const descriptor = {
  roles: {
    type: 'array',
    required: true,
    len: 3,
    fields: {
      0: { type: 'string', required: true },
      1: { type: 'string', required: true },
      2: { type: 'string', required: true },
    },
  },
};

比如用于 ​​{roles: ["admin", "user"]}​​​ 会产生两个错误,一个是数组长度不匹配,一个是缺少了索引为 ​​2​​ 的元素

defaultField 默认字段


​​defaultField​​​ 属性可以在 ​​array​​​ 和 ​​object​​ 类型中用于校验所有的值,它可以是一个包含有校验规则的对象或数组。 例子如下:

var descriptor = {
  urls: {
    type: "array", required: true,
    defaultField: {type: "url"}
  }
}

注意,​​defaultField​​​ 是 ​​fields​​​ 的扩展,见 deep rules.

Transform 变换


有时候需要在校验前修改值,强制修改为特定格式。 为此在校验规则中添加了 ​​transform​​, 这个属性会在校验前执行,以适当的方式改变原始对象的值。(也就是返回值会作用在原始对象的值上)

var schema = require('async-validator');
var sanitize = require('validator').sanitize;
var descriptor = {
  name: {
    type: "string",
    required: true, pattern: /^[a-z]+$/,
    transform(value) {
      return sanitize(value).trim();
    }
  }
}
var validator = new schema(descriptor);
var source = {name: " user  "};
validator.validate(source)
  .then(() => assert.equal(source.name, "user"));

如果没有 ​​transform​​​ 函数校验会失败因为前后空格导致正则与输入不符,但在添加了 ​​transform​​ 函数后便可通过因为字段已经被清洗了(或者翻译为使输入值符合预期格式)

Messages 提示信息


在某些需求下,你可能需要格式化支持或者想要不同校验错误信息。

最简单的方式就是直接为 ​​message​​ 属性赋值:

{name:{type: "string", required: true, message: "Name is required"}}

消息可以是任意类型的,比如 ​​JSX​​:

{name:{type: "string", required: true, message: <b>Name is required</b>}}

也可以是函数,比如使用 vue-i18n 时:

{name:{type: "string", required: true, message: () => this.$t( 'name is required' )}}

有时候你只是需要对相同的校验规则定义不同语言的提示信息,在这种情况下为各种语言重复定义信息就显得很多余。

var schema = require('async-validator');
var cn = {
  required: '%s 必填',
};
var descriptor = {name:{type: "string", required: true}};
var validator = new schema(descriptor);
// deep merge with defaultMessages
validator.messages(cn);
...

如果你要定义自己的校验函数,最好将提示信息赋值给消息对象,并在校验函数中通过 ​​options.messages​​ 访问消息。(说实话我没看懂是什么意思,应该是指不要把消息硬编码写在校验函数里面而是通过option传递,以便修改)

asyncValidator 异步校验函数
 

你可以对指定的字段自定义包含异步操作的校验函数

const fields = {
  asyncField: {
    asyncValidator(rule, value, callback) {
      ajax({
        url: 'xx',
        value: value,
      }).then(function(data) {
        callback();
      }, function(error) {
        callback(new Error(error));
      });
    },
  },

  promiseField: {
    asyncValidator(rule, value) {
      return ajax({
        url: 'xx',
        value: value,
      });
    },
  },
};

validator 校验函数


你也可像下面这样自定义校验函数:

const fields = {
  field: {
    validator(rule, value, callback) {
      return value === 'test';
    },
    message: 'Value is not equal to "test".',
  },

  field2: {
    validator(rule, value, callback) {
      return new Error(`${value} is not equal to 'test'.`);
    },
  },
 
  arrField: {
    validator(rule, value) {
      return [
        new Error('Message 1'),
        new Error('Message 2'),
      ];
    },
  },
};

FAQ


How to avoid warning 如何关闭警告
 

import Schema from 'async-validator';
Schema.warning = function(){};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/552256.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

信息系统项目管理师0053:设计和实施(4信息系统管理—4.1管理方法—4.1.3设计和实施)

点击查看专栏目录 文章目录 4.1.3设计和实施1.设计方法2.架构模式4.1.3设计和实施 开展信息系统设计和实施,首先需要将业务需求转换为信息系统架构,信息系统架构为将组织业务战略转换为信息系统的计划提供了蓝图。信息系统是支持组织中信息流动和处理的所有基础,包括硬件、软…

消息中间件Kafka分布式数据处理平台

目录 一.Kafka基本介绍 1.定义 2.特点 &#xff08;1&#xff09;高吞吐量、低延迟 &#xff08;2&#xff09;可扩展性 &#xff08;3&#xff09;持久性、可靠性 &#xff08;4&#xff09;容错性 &#xff08;5&#xff09;高并发 3.系统架构 &#xff08;1&#…

向量数据库与图数据库:理解它们的区别

作者&#xff1a;Elastic Platform Team 大数据管理不仅仅是尽可能存储更多的数据。它关乎能够识别有意义的见解、发现隐藏的模式&#xff0c;并做出明智的决策。这种对高级分析的追求一直是数据建模和存储解决方案创新的驱动力&#xff0c;远远超出了传统关系数据库。 这些创…

4核8G配置服务器多少钱?2024年阿里云服务器700元1年价格便宜

4核8G配置服务器多少钱&#xff1f;2024年阿里云服务器700元1年价格便宜。阿里云4核8G服务器租用优惠价格700元1年&#xff0c;配置为ECS通用算力型u1实例&#xff08;ecs.u1-c1m2.xlarge&#xff09;4核8G配置、1M到3M带宽可选、ESSD Entry系统盘20G到40G可选&#xff0c;CPU采…

手机拍照技术

拍照技巧 说明: 本文将主要介绍摄影和手机常见技巧&#xff1b; 1. 摄影的基本知识 **说明&#xff1a;**关于摄影&#xff0c;手机和相机的原理都是相同的&#xff0c;不同的是相机在很多方面优于手机&#xff0c;但是专业的设备对于我们这种的非专业的人来说&#xff0c;刚…

OpenCV从入门到精通实战(二)——文档OCR识别(tesseract)

导入环境 导入必要的库 numpy: 用于处理数值计算。 argparse: 用于处理命令行参数。 cv2: OpenCV库&#xff0c;用于图像处理。 import numpy as np import argparse import cv2设置命令行参数 ap argparse.ArgumentParser() ap.add_argument("-i", "--imag…

如何获取手机root权限?

获取手机的 root 权限通常是指在 Android 设备上获取超级用户权限&#xff0c;这样用户就可以访问和修改系统文件、安装定制的 ROM、管理应用权限等。然而&#xff0c;需要注意的是&#xff0c;获取 root 权限可能会导致手机失去保修、安全性降低以及使系统变得不稳定。在获取 …

CSS3 新特性 box-shadow 阴影效果、圆角border-radius

圆角 使用CSS3 border-radius属性&#xff0c;你可以给任何元素制作"圆角"&#xff0c;border-radius属性&#xff0c;可以使用以下规则&#xff1a; &#xff08;1&#xff09;四个值&#xff1a;第一个值为左上角&#xff0c;第二个值为右上角&#xff0c;第三个值…

EelasticSearch的docker安装-----》es客户端使用!!!

1.Docker安装 docker run -d --name es7 -e ES_JAVA_POTS"-Xms256m -Xmx256m" -e "discovery.typesingle-node" -v /opt/es7/data/:/usr/share/elasticsearch/data -p 9200:9200 -p 9300:9300 elasticsearch:7.14.02.客户端UI工具&#xff0c;Edge浏览器…

她在《繁花》大放异彩,“浪姐”暴瘦15斤,打脸了不看好她的观众

不知不觉&#xff0c;《浪姐》已经迎来第5季了。播到第4季的时候&#xff0c;改名成《乘风破浪2023》&#xff0c;这一季叫《乘风2024》&#xff0c;和前几季相比&#xff0c;热度依然不减。 都说3个女人一台戏&#xff0c;更何况这个节目&#xff0c;每次能请到30位姐姐&…

基于 LSTM 模型的古诗词自动生成算法实现及系统实现

近年来&#xff0c;研究者在利用循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;进行古诗自动生成方面取得了显著的效果。但 RNN 存在梯度问题&#xff0c;导致处理时间跨度较长的序列时 RNN 并不具备长期记忆存储功能。随后&#xff0c;出现的基…

基于Java的新闻发布及管理系统的设计与实现(内附设计LW + PPT+ 源码下载)

Java新闻发布及管理系统的设计与实现 项目名称&#xff1a; Java新闻发布及管理系统的设计与实现 项目技术栈 该项目采用了以下核心技术栈&#xff1a; 后端框架/库&#xff1a; JSP (Java Server Pages)数据库&#xff1a; MySQL前端技术&#xff1a; B/S体系结构开发工具…

selenum操作cookie进行免登陆【爬虫必修课1】

Selenium 操作 Cookie 进行免登录 使用 Selenium 自动化登录网站是一个常见的需求。但是直接输入用户名和密码登录非常不安全,同时每次登录都需要重复这个操作也很麻烦。一个更好的方式是使用 Cookie 进行免登录。 这篇博客就来介绍如何使用 Selenium 实现 Instagram 的免登录…

Qt基本使用

0. 基本对话框 dialog.cpp #include "dialog.h" #include "ui_dialog.h"#include <QFileDialog> #include <QColorDialog> #include <QFontDialog> #include <QInputDialog>Dialog::Dialog(QWidget *parent): QDialog(parent), u…

C++ queue priority_queuestack 详解及模拟实现

1. stack的介绍和使用 1.1 stack的介绍 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 2. stack是作为容器适配器被实现的&#xff0c;容器适配器即是对特定类封装作为其底层的容…

03攻防世界-unserialize3

根据题目可以看出&#xff0c;这是个反序列化的题目 打开网址观察题目可以看到这里是php的代码&#xff0c;那么也就是php的反序列化 本题需要利用反序列化字符串来进行解题&#xff0c;根据源码提示我们需要构造code。 序列化的意思是&#xff1a;是将变量转换为可保存或传输…

Java中的容器,线程安全和线程不安全

Java中的容器主要指Java集合框架中的一系列类&#xff0c;它们提供了存储和操作对象的能力。在讨论容器的线程安全性时&#xff0c;我们可以将其分为两大类&#xff1a; 线程安全的容器&#xff1a; Vector: 这是ArrayList的线程安全版本&#xff0c;所有方法都被同步以确保在…

小白必看的Ubuntu20.04安装教程(图文讲解)

总的来说&#xff0c;安装Ubantu包含以下三个步骤&#xff1a; 一、安装虚拟机 二、Ubuntu镜像下载 三、虚拟机配置 一、安装虚拟机 选择安装VMware Workstation&#xff0c;登录其官网下载安装包&#xff0c;安装点这里。 下载后运行安装向导&#xff0c;一直Next即可。最…

OpenCV基本图像处理操作(九)——特征匹配

Brute-Force蛮力匹配 Brute-Force蛮力匹配是一种简单直接的模式识别方法&#xff0c;经常用于计算机视觉和数字图像处理领域中的特征匹配。该方法通过逐一比较目标图像中的所有特征点与源图像中的特征点来寻找最佳匹配。这种方法的主要步骤包括&#xff1a; 特征提取&#xff…

嵌入式驱动学习第七周——pinctrl子系统

前言 pinctrl子系统用来控制每个端口的复用功能和电气属性&#xff0c;这篇博客来介绍一下pinctrl子系统。 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以关注本博主并订阅本专栏&#xff0c;一起讨…
最新文章