在HTML5中，表单验证是一个内置的功能，可以减少开发人员的工作量并提高用户体验。本文将介绍如何使用HTML5内置的表单验证来检查表单的有效性，避免提交无效数据。
1. 表单验证属性
HTML5中的表单验证属性有以下几种：
required: 必填字段，如果没有填写会提示用户。pattern: 正则表达式验证，可以让用户输入符合特定格式的数据。min和max: 数值范围验证，只允许输入指定范围内的数字。maxlength和minlength: 字符串长度验证，限制输入的字符数。email: 邮箱地址验证。url: URL地址验证。tel: 电话号码验证。
这些属性都是直接添加到HTML表单元素上的，例如：
------ ----------- --------------- -------- ------------- ---------------
2. 自定义验证规则
除了内置的验证属性之外，还可以使用JavaScript自定义验证规则，在表单提交之前对数据进行验证。这比内置的验证属性更灵活，可以根据实际需求定制验证规则。
要使用自定义验证规则，需要使用setCustomValidity()方法来设置错误消息。例如：
------ ----------- ---------- ---------
--------
-------------------------------------------------------- ---------- -
--- --- - ---------------------
-- ----------- -- --- - - -- --- - ---- -
------------------------------------------
- ---- -
---------------------------
-
---
---------这段代码会在输入框的值发生变化时对其进行验证，如果不符合规则，则会提示错误消息。
3. 验证事件
除了使用自定义验证规则外，还可以使用表单元素上的invalid和valid事件来实现自定义验证。例如：
----- ---------------- ----------------
------ ----------- ------------ ---------- ---------
------- -------------------------
-------
--------
-------- -------------- -
--- ---------- - ---------------------------------
-- ---------------------------------- -
---------------------------------------------
------ ------
- ---- -
---------------------------------
------ -----
-
-
---------这段代码会在表单提交之前对表单数据进行验证，如果不符合规则，则会阻止表单的提交并提示错误消息。
4. 总结
HTML5内置的表单验证功能可以有效地减少开发人员的工作量，并提高用户体验。除了内置的验证属性外，还可以使用JavaScript自定义验证规则和验证事件来实现更灵活的验证需求。在实际开发中，应根据具体需求选择合适的验证方式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29009