HTML5的原生表单校验能力大幅简化了前端开发中的表单合法性校验工作，其中required和pattern是两个最常用的属性，能够覆盖大部分基础校验场景，减少不必要的JavaScript代码编写。
required属性的基础用法
required是HTML5为表单输入控件新增的布尔属性，用于标记该字段为必填项。当用户提交表单时，如果必填字段为空，浏览器会自动弹出默认的提示信息，阻止表单提交。
支持required属性的常见表单元素包括<input>、<textarea>、<select>，使用时只需要在标签中添加required即可，不需要赋值。
<!-- 必填的文本输入框 -->
<form id="userForm">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<br><br>
<label for="intro">个人简介：</label>
<textarea id="intro" name="intro" required></textarea>
<br><br>
<label for="city">所在城市：</label>
<select id="city" name="city" required>
<option value="">请选择城市</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<br><br>
<button type="submit">提交</button>
</form>
上述代码中，三个表单字段都添加了required属性，如果用户没有填写用户名、个人简介或者没有选择城市，点击提交按钮时浏览器会自动拦截，并提示对应字段需要填写。
pattern属性的正则校验能力
required只能校验字段是否为空，而pattern属性支持传入正则表达式，用来校验输入内容的格式是否符合要求，适用于手机号、邮箱、密码格式等场景。
pattern的值是一个标准的正则表达式，浏览器会在用户提交表单时，检查输入内容是否匹配该正则，不匹配则阻止提交并弹出提示。
常见的pattern校验示例
- 手机号校验：匹配11位国内手机号，正则可以写为
^1[3-9]d{9}$ - 邮箱校验：基础邮箱格式匹配，正则可以写为
^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$ - 密码强度校验：要求6-18位，包含字母和数字，正则可以写为
^(?=.*[A-Za-z])(?=.*d)[A-Za-zd]{6,18}$
<form id="registerForm">
<label for="phone">手机号：</label>
<input type="text" id="phone" name="phone" required pattern="^1[3-9]d{9}$">
<br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required pattern="^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$">
<br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required pattern="^(?=.*[A-Za-z])(?=.*d)[A-Za-zd]{6,18}$">
<br><br>
<button type="submit">注册</button>
</form>
自定义校验提示信息
浏览器默认的校验提示信息比较通用，有时候不符合业务需求，我们可以通过setCustomValidity方法自定义提示内容。
当输入内容不符合校验规则时，调用该元素对象的setCustomValidity方法传入提示文本，浏览器就会显示我们自定义的内容；当输入合法时，需要调用setCustomValidity('')清空提示，否则表单会一直无法提交。
// 获取手机号输入框元素
const phoneInput = document.getElementById('phone');
// 监听输入事件
phoneInput.addEventListener('input', function() {
// 先清空自定义提示
this.setCustomValidity('');
// 检查是否匹配正则
const phoneReg = /^1[3-9]d{9}$/;
if (this.value && !phoneReg.test(this.value)) {
this.setCustomValidity('请输入正确的11位国内手机号');
}
});
两种属性的组合使用场景
required和pattern可以同时使用，先校验字段是否为空，再校验格式是否符合要求，覆盖更完整的校验逻辑。
比如我们需要一个必填的身份证号字段，要求18位，最后一位可以是数字或者X，就可以同时添加两个属性：
<label for="idCard">身份证号：</label>
<input type="text" id="idCard" name="idCard" required pattern="^d{17}[dXx]$">
<br><br>
HTML5原生校验的注意事项
- 不同浏览器的默认提示样式和文案可能有差异，如果需要统一的提示样式，可能需要额外编写CSS和JavaScript覆盖默认行为
- pattern属性只在提交表单时触发校验，不会在用户输入过程中实时校验，如果需要实时提示，需要结合input事件监听
- 原生校验只能做前端层面的校验，不能替代后端的数据校验，所有提交到服务端的数据都必须在后端再次做合法性验证，避免恶意提交绕过前端校验
- 如果表单元素设置了disabled属性，那么该元素的校验会被忽略，不会触发required和pattern的校验逻辑