表单验证一直是我在 Web 开发中最不喜欢的部分。您需要在客户端和服务器端重复验证，处理大量事件，并担心表单元素样式。为了帮助表单验证，HTML 规范添加了一些新的表单属性，如required和pattern来充当非常基本的验证。但是，您知道吗，您可以使用 JavaScript 控制本机表单验证？
validity
每个表单元素（例如input ）都提供一个表示ValidityState的validity属性。 ValidityState看起来像这样：
// 输入.有效性
{
错误输入：错误，
自定义错误：真，
模式不匹配：错误，
范围溢出：假，
范围下溢：假，
步骤不匹配：错误，
太长：假的，
太短：错误，
类型不匹配：假，
有效：假，
缺失值：真
}
ValidityState中的每个属性都可以大致匹配特定的验证问题： valueMissing将匹配required的属性， tooLong和tooShort匹配minLength和maxLength等。
检查有效性并设置自定义验证消息
每个表单字段为每种错误类型提供默认错误消息，但为您的应用程序设置更多自定义消息可能会更好。您可以使用表单字段的setCustomValidity来创建您自己的消息：
// 检查有效性
input.checkValidity();
如果（输入.validity.valueMissing）{
input.setCustomValidity('这是必填项，兄弟！你怎么忘了？');
} 别的 {
// 清除之前的错误
input.setCustomValidity('');
}
但是，仅通过setCustomValidity设置消息不会显示消息。
reportValidity
要向用户显示错误，请使用表单元素的reportValidity方法：
// 显示错误！ 输入.reportValidity();
错误工具提示将立即显示在屏幕上。以下示例每五秒显示一次错误：
请参阅CodePen上 David Walsh ( @darkwing ) 的 Pen Untitled 。
挂钩到本机表单验证系统非常有价值，我希望开发人员更多地使用它。每个网站都有自己的客户端验证样式、事件处理等。让我们使用我们提供的内容吧！
自定义 HTML 表单验证一文首先出现在David Walsh 博客上。
