HTML5表单自定义验证setCustomValidity

HTML5表单自定义验证setCustomValidity

HTML5表单验证给前端开发带来许多便利，但是默认的提示不友好。我们可以通过setCustomValidity方法来自定义提示信息，更准确的提示给用户。

先来看看未使用setCustomValidity()方法的实现：

A: 输入内容为空

对应的接口属性值：

B: 输入内容不符合规则的结果

对应接口属性值：

C: 输入内容符合规则的结果

对应接口的属性值：

三种情况都正确验证，但B情况提示的信息不是我们想要的。下面我们就通过setCustomValidity方法来自定义B情况的提示信息，代码如下：

A：输入内容为空

对应接口属性值：

B: 输入内容不符合规则

对应接口属性值：

C: 输入符合规则

对应接口属性值：

不管怎么样，ABC三种情况都显示一样的提示，从两个C情况的接口属性值对比来看，调用setCustomValidity时validationMessage没清空(正确值应为空)，customError值为true（正确值为false），valid值为false(正确值为true)。所以只有validity下的属性值（除valid外）都为false并validationMessage为空时才算验证通过。

优化后的代码 ：