在前端开发中，表单验证是非常重要的一个环节。HTML5 提供了许多内置的表单验证方式，但有时候需要自定义一些验证规则来满足业务需求。本文将介绍一种用 JavaScript 实现 HTML5 表单验证的方法。
HTML5 表单验证简介
HTML5 表单验证包括以下几个方面：
- 必填字段验证（required）
- 数据类型验证（type）
- 最大值/最小值验证（max/min）
- 正则表达式验证（pattern）
在 HTML5 中，表单元素上可以添加这些属性进行验证。例如：
<input type="text" name="username" required>
上述代码表示一个必填的文本框，如果用户没有填写任何内容就提交表单，浏览器会提示“此字段为必填项”。
自定义表单验证
虽然 HTML5 内置的表单验证方式已经比较丰富了，但有时候我们还需要自定义一些验证规则来满足业务需求。比如说，我们要求密码长度必须大于等于 6 位，不能超过 20 位。这时候就需要使用 JavaScript 来实现验证逻辑。
方案一：使用 pattern 属性
我们可以给密码输入框添加一个 pattern 属性，用正则表达式来验证输入的密码是否符合规则。例如：
<input type="password" name="password" pattern=".{6,20}" required>上述代码中，pattern 属性的值是一个正则表达式，表示密码长度必须大于等于 6 位，小于等于 20 位。
这种方式的好处是可以利用 HTML5 的内置验证提示机制。如果用户输入的密码不符合规则，浏览器会自动弹出提示框进行提醒。但缺点是不能完全控制提示信息的样式和内容。
方案二：使用 JavaScript 实现表单验证
我们可以使用 JavaScript 来实现自定义表单验证。首先，需要给表单元素添加一个 onsubmit 事件，当用户提交表单时会触发该事件。例如：
<form onsubmit="return validateForm()"> <input type="text" name="username"> <input type="password" name="password"> <button type="submit">提交</button> </form>
上述代码中，validateForm() 函数用来验证表单数据是否符合规则。
接下来，我们编写 validateForm() 函数来实现表单验证逻辑。例如：
-- -------------------- ---- -------
-------- -------------- -
--- -------- - ------------------------------------
--- -------- - ------------------------------------
-- --------- -- --- -
-----------------
------ ------
-
-- ---------------- - - -- --------------- - --- -
----------------- - ------ -- ----
------ ------
-
------ -----
-上述代码中，我们首先获取表单中的用户名和密码值。然后，依次判断它们是否符合规则，如果不符合就弹出提示框并返回 false，表示验证失败。最后返回 true，表示验证成功。
总结
本文介绍了 HTML5 表单验证的基本用法和自定义表单验证的两种方式。使用 JavaScript 实现表单验证可以完全掌控提示信息的样式和内容，从而更好地满足业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29010