validator「validatorjs」
表单异步验证js库：async-validator
async-validator 是一个表单的异步验证的第三方库，它是 的演变。也是 element-ui 中的form组件所使用的验证方式。
基本用法包括定义一个descriptor，将其分配给schema，并将要验证的对象和回调函数传递给schema创建出来的validator的validate方法：
该方法将返回Promise对象，如：
传递给validate或asyncvalidate的选项将传递给验证函数，以便您可以在验证函数中临时引用数据（例如模型引用）。但是，某些选项名是保留的；如果使用选项对象的这些属性，它们将被覆盖。保留的属性是消息、异常和错误。
针对单个字段测试多个验证规则通常很有用，这样可以使规则成为对象数组，例如：
要使用的验证程序的类型，识别的类型值如下：
boolean,是否必填
模式规则属性表示正则表达式,该值必须匹配才能通过验证。
使用min和max属性定义范围。对于字符串和数组类型，将根据长度进行比较，对于数字类型，数字不得小于min，也不得大于max。
验证字段的确切长度。对于字符串和数组类型，对length属性执行比较，对于数字类型，此属性指示数字的完全匹配，即，它可能仅严格等于len。如果len属性与最小和最大范围属性组合，则len优先。
枚举，要从可能值列表中验证值，请使用带有枚举属性的枚举类型，列出该字段的有效值。
空白，通常将仅包含空格的必填字段视为错误。要为仅包含空格的字符串添加其他测试，请将空白属性添加到值为true的规则。规则必须是字符串类型。
如果需要验证深层对象属性，则可以通过将嵌套规则分配给规则的fields属性来为对象或数组类型的验证规则执行此操作。
深度规则验证为嵌套规则创建架构，因此还可以指定传递给schema.validate（）方法的选项。
父规则也会被验证，因此如果您有一组规则，例如：
并提供 {roles: ["admin", "user"]} 这样的源对象，将会创建两个错误。一个用于数组长度不匹配，另一个用于索引2处缺少的必需数组项。
defaultField属性可与数组或对象类型一起使用，以验证容器的所有值。它可以是包含验证规则的对象或数组。例如：
有时需要在验证之前转换值，可能是为了强制价值或以某种方式对其进行消毒。为此，请将验证规则添加到转换有时需要在验证之前转换一个值，可能是强制值或以某种方式对其进行清理。为此，请向验证规则添加转换函数。该属性在验证之前被转换，并重新分配给源对象，以在适当的位置改变该属性的值。
如果没有转换函数，验证将失败，因为模式不匹配，因为输入包含前导空格和尾随空格，但通过添加转换函数验证传递，同时清理字段值。
消息，根据您的应用程序要求，您可能需要i18n支持，或者您可能更喜欢不同的验证错误消息。实现这一点的最简单方法是将消息分配给规则：
消息可以是任何类型，例如jsx格式。
消息也可以是一个函数，例如，如果使用vue-i18n：
对于不同的语言，可能需要相同的模式验证规则，在这种情况下，为每种语言**模式规则是没有意义的。在这个场景中，您只需为该语言提供您自己的消息并将其分配给模式：
如果要定义自己的验证函数，最好将消息字符串分配给消息对象，然后通过验证函数内的options.messages属性访问消息。
异步验证器，您可以为指定字段自定义异步验证函数：function(rule, value, callback)
验证器，您可以为指定字段自定义验证函数：function(rule, value, callback)
React + Ant Design Form 表单自定义校验 validator debounce
Ant Design 的 Form 组件自定义校验
将 validator 放在 rules 的数组中
调用方法：当 value 在变化的时候请求接口，根据接口返回的值，调用 callback 回调函数
方法由3个参数组成，rule 是规则，value 是你输入的值，callback 是个回调函数
不管 callback 是否返回提示内容，都要写 callback 这个函数，不返回内容需要写个空的 callback() ，否则表单校验通不过
新版的 antd 表单字段校验方法原来的回调方法改成返回一个 Promise 对象
由于校验需要调用接口，为减少请求次数，需要自己写个 debounce 防抖方法
防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
修改表单校验调用方法
如何使用Validator框架
Validator框架是一个独立的Validation Framework，目前在Struts1.1中可以一起打包下载。作为Apache Commom的一个OpenSource，它可以和Struts一起结合使用，也可以和其他非Web应用中使用。前段时间利用Eclipse3.02 + MyEclipse3.8.4结合Xdoclet开发了一个EJB + Struts的Web应用，发现采用这些工具开发效率还是比较高的。MyEclipse通过xdoclet生成CMP ejb的时候会自动创建对应的Value Object类，结合struts框架时，可以把这Value Object结合Struts中的Form采用Composite模式，采用委托的方式来实现ActionForm。这些在Eclipse IDE中实现非常快速。但也存在一些问题，当JSP页面中的FORM中的数据通过Struts中的Form进入到对应的Value Object之前需要进行数据合法性校验，而这种校验在一个企业级Web应用中会存在大量的重复冗余代码，造成大量的重复工作和维护的工作量。
Validator是一个独立于表现和业务逻辑的一个FrameWork，它通过预定义一组校验规则以及提供了一套简单的扩展机制，让程序员可以自由的定义自己复杂的校验规则。规则与规则可以是相互依赖的，也可以是独立的。
下面使用一个登录的例子简单谈谈如何让Validator框架与Struts框架进行整合，从而把数据校验独立出来，使得大部分的校验规则得到重用，并且使得校验方法可配置化和易于维护。
1、准备配置文件
这里要用到两个xml文件，validator-rules.xml和validation.xml，前者用于定义校验器，在validator框架中已经预定义了十几个常用的校验器的实现；后者用于定义和Struts框架中具体的Form相关联的各个字段的校验，这两个文件放置在/WEB-INF/目录下面。
2、准备Struts的Form和Action
定义一个Form，这个Form从ValidatorFrom继承而来（缺省从ActionForm继承），具体的代码如下：
//Created by MyEclipse Struts
// XSL source (default): platform:/plugin/com.genuitec.eclipse.cross.easystruts.eclipse_3.8.4/xslt/JavaClass.xsl
package com.test.struts.form;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.validator.ValidatorForm;
/**
* MyEclipse Struts
* Creation date: 06-19-2005
*
* XDoclet definition:
* @struts:form name="logonForm"
*/
public class LogonForm extends ValidatorForm {
private String memberID;
private String password;
/**
* Method reset
* @param mapping
* @param request
*/
public void reset(ActionMapping mapping, HttpServletRequest request) {
memberID = null;
password = null;
}
/**
* @return Returns the memberID.
*/
public String getMemberID() {
return memberID;
}
/**
* @param memberID The memberID to set.
*/
public void setMemberID(String memberID) {
this.memberID = memberID;
}
/**
* @return Returns the password.
*/
public String getPassword() {
return password;
}
/**
* @param password The password to set.
*/
public void setPassword(String password) {
this.password = password;
}
}
定义一个Action，具体的代码如下所示：
//Created by MyEclipse Struts
// XSL source (default): platform:/plugin/com.genuitec.eclipse.cross.easystruts.eclipse_3.8.4/xslt/JavaClass.xsl
package com.test.struts.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.test.struts.form.LogonForm;
/**
* MyEclipse Struts
* Creation date: 06-19-2005
*
* XDoclet definition:
* @struts:action path="/logon" name="logonForm" input="/jsp/logon.jsp" scope="request" validate="true"
*/
public class LogonAction extends Action {
/**
* Method execute
* @param mapping
* @param form
* @param request
* @param response
* @return ActionForward
*/
public ActionForward execute(
ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response) {
LogonForm logonForm = (LogonForm) form;
return mapping.findForward("success");
}
}
FormBean和Action在struts-config.xml中的配置如下所示：
form-beans
form-bean name="logonForm" type="com.test.struts.form.LogonForm" / /form-beans
action-mappings
action
attribute="logonForm"
input="/jsp/logon.jsp"
name="logonForm"
path="/logon"
scope="request"
validate="true"
type="com.test.struts.action.LogonAction"
forward name="success" path="/jsp/success.jsp"/
/action
/action-mappings
注意：在action元素中的validate属性必需设置为true。
3、配置validator-rules.xml和validation.xml文件
validator-rules.xml用于配置校验器，这个文件基本上可以重用。validation.xml用于配置与具体的Form Bean有关的校验配置。
validator-rules.xml
form-validation
global
validator name="required"
classname="org.apache.struts.validator.FieldChecks"
method="validateRequired"
methodParams="java.lang.Object,
org.apache.commons.validator.ValidatorAction,
org.apache.commons.validator.Field,
org.apache.struts.action.ActionErrors,
javax.servlet.http.HttpServletRequest"
msg="errors.required"
......
/global
/form-validation
Validation.xml
form-validation
!-- ========== Default Language Form Definitions ===================== --
formset
form name="logonForm"
field property="memberID"
depends="required,short, minlength,maxlength"
arg0 key="prompt.memberID"/
arg1 key="${var:minlength}" name="minlength"
resource="false"/
arg2 key="${var:maxlength}" name="maxlength"
resource="false"/
var
var-namemaxlength/var-name
var-value16/var-value
/var
var
var-nameminlength/var-name
var-value3/var-value
/var
/field
field property="password"
depends="required, minlength,maxlength"
arg0 key="prompt.password"/
arg1 key="${var:minlength}" name="minlength"
resource="false"/
arg2 key="${var:maxlength}" name="maxlength"
resource="false"/
var
var-namemaxlength/var-name
var-value16/var-value
/var
var
var-nameminlength/var-name
var-value3/var-value
/var
/field
/form
/formset
/form-validation
4、定义资源文件ApplicationResources.properties
首先，资源文件必须要在struts-config.xml文件中进行定义：
message-resources parameter="com.test.struts.ApplicationResources" /
下面是资源文件中的内容，它主要关联到：
validator-rules.xml文件中validator元素中的msg属性；
validation.xml中field元素中作为参数传递给validator框架的arg0 -- arg3。
# Resources for parameter 'com.test.struts.ApplicationResources'
# Project P/ValidatorWeb
errors.header=span class="error-header1"Errors:/spanbrspan class="error-header2"You must correct the following error(s) before processing./spanul
errors.footer=/ul
errors.prefix=lispan class="error-text"
errors.suffix=/span/li
prompt.memberID=Member ID
prompt.password=Password
prompt.test=test
# Standard error messages for validator framework checks
errors.required={0} is required.
errors.minlength={0} cannot be less than {1} characters.
errors.maxlength={0} cannot be greater than {2} characters.
errors.invalid={0} is invalid.
errors.byte={0} must be an byte.
errors.short={0} must be an short.
errors.integer={0} must be an integer.
errors.long={0} must be an long.
errors.float={0} must be an float.
errors.double={0} must be an double.
errors.date={0} is not a date.
errors.range={0} is not in the range {1} through {2}.
errors.creditcard={0} is not a valid credit card number.
errors.email={0} is an invalid e-mail address.
5、在struts-config.xml中配置validator
必须在struts-config.xml中以plugin的方式指定validator的配置资源，这样，web应用在能够根据这些配置把各种校验器等资源加载到内存中。
plug-in className="org.apache.struts.validator.ValidatorPlugIn"
set-property property="pathnames" value="/WEB-INF/validator-rules.xml,/WEB-INF/validation.xml" /
/plug-in
6、在相关的JSP文件中通过Struts框架中的html标签制订相应的属性值
html:javascript dynamicJavascript="true"
formName="logonForm"
staticJavascript="false"/
这个标签用于在具体的jsp生成的客户端html页面中生成一段对应的javascript代码。
html:form action="/logon" focus="memberID"
onsubmit="return validateLogonForm(this);"
/html:form
用于当用户点击html:form中的submit按钮时，会执行相应的检查，如果检查没有通过，则不回去调用Action中的execute方法。
antd form表单validator 校验(4.17) 输入框一直是红色解决方法
使用 antd 的 validator 方法时 用 antd 官方提供的示例会 导致输入框一直是红色
改用以下写法就好了
```
rules={[
{
validator: async function validator(_, value, callback) {
const res: any = await getCheckNumberUnique(value);//异步发送接口 给 后端进行校验
if (res res.data res.data.code === 500) {
throw new Error('地图编号重复');//错误信息
} else {
callback();//恢复为蓝色框
}
},
},
]}
```
Validator校验器（解决多个异步检验）
定义一个Validator校验器，可用于表单验证，但又与表单组件相互独立，参数提供“需要校验的数据”和“校验规则”，返回“校验结果”。（React+Typescript）
例如：(数据格式)
想在以上功能的基础上实现 自定义异步验证 ,
验证规则中加入一个validate，这里的validate函数通常会出现ajax异步请求：
其中， validate(value, resolve, reject) ，参数 value 是需要校验的数据，参数 resolve 是成功后需要执行的函数，参数 reject 是失败后需要执行的函数， reject 的参数就是校验结果的文字内容。
无论 Promise 里面执行的是 resolve 还是 reject ，返回给 after 的状态一定是fulfilled，那么 Promise.all([after1, after2]) 就会执行then里面的回调函数success ：
