表单校验

标准校验

当指定customReport=false时使用标准的HTML表单校验功能，只需要在input元素上设置maxLength、minLength、required、pattern等属性即可。

• 当表单校验失败时，表单会提供伪类:invalid，可以通过input:invalid、form:invalid来设置样式。
• 关于更多的HTML5表单校验功能请参考：HTML5 表单验证
• 关于input元素的属性请参考：input

自定义校验显示

多数情况下，我们并不满足于默认的校验显示方式，我们希望自定义校验显示，比如在输入控件下方显示红色错误提示。

• customReport=true是默认情况
• 使用data-field-name="xxxx"指定字段名。
• 重点：由data-validate-field="<字段状态路径>"指定该元素要显示哪个字段的校验错误信息。

提示

• ❓ : 为什么user.name在初始化时不会显示校验错误？
• 🍨 : 上例中user.name='x'不满足minLength=3校验规则，但是在初始化时并没有显示错误。这是浏览器的默认行为，必须是有用户输入时才会校验。并且这种行为在不同的字段校验规则却是不一样的，pattern校验就会在初始化时生效。上例中的phone就会显示错误。这种不一致性主要是由浏览器决定的，不同的浏览器还不一样，要避免这种不致性，需要使用自定义校验规则。

自定义校验规则

上述两个例子中，我们使用的是标准的HTML5表单校验规则功能（pattern、minLength等等），这存在几个问题

• 校验规则比较单一，无法满足复杂的校验需求。
• 不同浏览器的校验行为存在细微差异。

为此，我们需要在使用useForm时，传入一个validate函数，该函数用于自定义校验规则,实现更复杂的校验逻辑。

validate函数的签名如下：

{
  validate?:(path:string,value:any,part:string | null,fieldEle:HTMLElement)=>boolean | string
}

参数	说明
path	字段元素的name属性，即状态路径
value	字段值
part	将字段值分解为几部分时的标识，详见下文分解字段
fieldEle	字段元素

• validate函数返回true代表校验成功，返回false代表校验失败。返回string代表校验失败时的提示信息。
• 当校验失败时，会在field元素，input元素以信data-field-name元素自动添加invalid类。

提示

对比上例浏览器的默认行为，user.name在初始化时会显示校验错误