HTML5 表单验证：让你的表单像个严谨的管家，而不是个傻乎乎的摆设
话说回来，咱们写网页，十有八九都离不开表单。用户注册、信息填写、在线购物…… 各种场景都少不了它。但有时候，用户填错了，填漏了，甚至故意捣乱，你的表单就成了个大麻烦。
想当年，没有 HTML5 的时候，表单验证简直就是一场噩梦。得用 JavaScript 吭哧吭哧地写一堆代码，判断这判断那，稍不留神就出了 Bug，简直让人怀疑人生。
幸好，HTML5 带着它的表单验证属性横空出世，简直就是救星！今天，咱们就来好好聊聊 HTML5 那些好用的表单验证属性，让你的表单像个严谨的管家，而不是个傻乎乎的摆设。
1. required：大哥，这个字段是必填的啊！
required 属性，简单粗暴，但效果杠杠的。你只需要在 <input>、<textarea>、<select> 等表单元素上加上 required，浏览器就会自动检查用户是否填写了内容。如果没填，提交表单的时候，浏览器会跳出来一个提示，提醒用户：“喂，大哥，这个字段是必填的啊！”
举个例子，你想让用户必须填写用户名：
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>是不是超级简单？再也不用自己写 JavaScript 判断 username 是否为空了，浏览器帮你搞定。
而且，浏览器自带的提示信息通常会根据用户的语言自动调整，比如中文浏览器会提示“请填写此字段”，英文浏览器会提示“Please fill out this field”，非常人性化。
当然，required 属性也有一些小技巧。比如，你可以使用 title 属性自定义提示信息：
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required title="请输入有效的邮箱地址">这样，当用户没有填写邮箱，或者填写的邮箱格式不正确时，浏览器会显示你自定义的提示信息，更加贴心。
2. pattern：正则表达式，让你的表单验证如虎添翼
pattern 属性，是 HTML5 表单验证的杀手锏。它可以让你使用正则表达式来定义表单元素的输入格式。有了它，你可以轻松验证邮箱、手机号码、身份证号码等等各种复杂的格式。
正则表达式，这玩意儿听起来有点高大上，但其实也没那么可怕。简单来说，它就是一种用来描述字符串模式的工具。你可以用它来判断一个字符串是否符合某种规则。
比如，你想验证用户输入的手机号码是否符合中国的手机号码格式（11 位数字，以 1 开头）：
<label for="phone">手机号码：</label>
<input type="tel" id="phone" name="phone" pattern="1[3-9]d{9}" title="请输入有效的手机号码">这里的 pattern="1[3-9]d{9}" 就是一个正则表达式。它表示：
1：必须以 1 开头[3-9]：第二位可以是 3 到 9 之间的任意数字d{9}：后面跟着 9 位数字
当用户输入的手机号码不符合这个格式时，浏览器会弹出提示，告诉你应该输入什么样的内容。
再来一个例子，验证身份证号码：
<label for="id_card">身份证号码：</label>
<input type="text" id="id_card" name="id_card" pattern="^[1-9]d{5}(18|19|20)d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$" title="请输入有效的身份证号码">这个正则表达式稍微复杂一些，但原理是一样的。它用来验证身份证号码的各个部分是否符合规范。
pattern 属性的强大之处在于，你可以根据自己的需求，自定义各种复杂的验证规则。只要你能写出正确的正则表达式，几乎可以验证任何格式的数据。
3. min 和 max：数字和日期的范围限制
min 和 max 属性，用来限制数字和日期的范围。它们通常用于 <input type="number"> 和 <input type="date"> 类型的表单元素。
比如，你想让用户输入的年龄必须在 18 到 60 岁之间：
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="18" max="60">当用户输入的年龄小于 18 或者大于 60 时，浏览器会弹出提示，告诉用户应该输入的范围。
对于日期类型的表单元素，min 和 max 属性可以用来限制日期的选择范围：
<label for="birthday">出生日期：</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2023-12-31">这样，用户就只能选择 1900 年 1 月 1 日到 2023 年 12 月 31 日之间的日期。
min 和 max 属性，简单实用，可以有效防止用户输入超出范围的数据。
4. 综合运用：让你的表单验证更上一层楼
光有单个的验证属性还不够，我们需要把它们组合起来，才能让表单验证发挥更大的作用。
比如，你想让用户注册账号，要求用户名必须是 6-12 位字母或数字，密码必须是 8-16 位，包含大小写字母和数字，并且两次输入的密码必须一致。
首先，用户名：
<label for="reg_username">用户名：</label>
<input type="text" id="reg_username" name="reg_username" required pattern="^[a-zA-Z0-9]{6,12}$" title="请输入6-12位字母或数字">这里使用了 required 属性确保用户必须填写用户名，使用 pattern 属性验证用户名是否符合 6-12 位字母或数字的规则。
然后，密码：
<label for="reg_password">密码：</label>
<input type="password" id="reg_password" name="reg_password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,16}$" title="请输入8-16位包含大小写字母和数字的密码">这个 pattern 属性就比较复杂了。它使用了几个 positive lookahead 断言 (?=...) 来确保密码包含大小写字母和数字。
最后，确认密码：
<label for="reg_confirm_password">确认密码：</label>
<input type="password" id="reg_confirm_password" name="reg_confirm_password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,16}$" title="请再次输入密码">虽然这个 pattern 和密码的一样，但是我们需要用 JavaScript 来验证两次输入的密码是否一致。HTML5 没有直接提供验证两个字段是否一致的属性，所以我们需要自己写代码来实现。
const password = document.getElementById('reg_password');
const confirmPassword = document.getElementById('reg_confirm_password');
confirmPassword.addEventListener('input', function() {
if (password.value !== confirmPassword.value) {
confirmPassword.setCustomValidity('两次输入的密码不一致');
} else {
confirmPassword.setCustomValidity('');
}
});这段 JavaScript 代码监听 confirmPassword 的 input 事件，当用户输入内容时，会检查 password 和 confirmPassword 的值是否一致。如果不一致，就使用 setCustomValidity 方法设置一个自定义的验证错误信息。如果一致，就清空错误信息。
setCustomValidity 是一个非常有用的方法，它可以让你自定义表单元素的验证错误信息。当表单元素的值不符合你的要求时，你可以使用它来显示一个自定义的提示信息，让用户知道应该如何修改输入。
5. input type 的力量：事半功倍的验证
HTML5 引入了许多新的 input type，比如 email、url、tel、number、date 等等。这些新的 input type 不仅可以提供更好的用户体验，还可以进行一些基本的验证。
比如，当你使用 <input type="email"> 时，浏览器会自动验证用户输入的内容是否符合邮箱的格式。当你使用 <input type="url"> 时，浏览器会自动验证用户输入的内容是否符合 URL 的格式。
这些内置的验证功能可以帮你节省大量的代码，让你的表单验证更加简洁高效。
总结：让你的表单不再是摆设
HTML5 的表单验证属性，就像一把瑞士军刀，简单易用，功能强大。 required 确保必填， pattern 用正则表达式进行格式校验， min 和 max 限制范围，再加上各种新的 input type， 组合起来，就能打造一个强大、健壮、用户体验良好的表单。
不要再让你的表单成为一个傻乎乎的摆设，赶紧用 HTML5 的表单验证属性武装起来吧！ 你会发现，表单验证其实也可以很简单，很有趣。从此告别冗长的 JavaScript 代码，享受 HTML5 带来的便利。