HTML5为表单验证提供了原生的支持，开发者可以通过配置输入元素的属性快速实现数据合法性校验，大幅减少自定义验证逻辑的开发工作量。原生验证会在表单提交时自动触发，也能通过JavaScript手动调用验证方法，适配不同的业务场景需求。
HTML5原生表单验证的核心属性
HTML5在<input>标签上新增了多个验证相关的属性，不同类型的输入元素可以搭配不同的属性实现特定规则的校验。
通用验证属性
- required：标记该输入项为必填项，提交时如果为空会触发验证失败提示。
- pattern：通过正则表达式定义输入内容的匹配规则，不符合规则时验证失败。
- minlength/maxlength：限制输入内容的最小和最大长度，适用于文本类输入场景。
数值与日期类输入属性
- min/max：限制数值或日期输入的最小值和最大值，适用于
type="number"、type="date"等类型的输入。 - step：定义数值输入的步长，比如设置step为2时，只能输入偶数数值。
常见输入类型的验证示例
不同类型的<input>元素搭配对应的验证属性，可以快速实现场景化的校验逻辑。
邮箱验证
使用type="email"的输入类型，浏览器会自动校验输入内容是否符合邮箱格式，同时可以搭配required属性要求必填。
<form> <label>邮箱地址：</label> <input type="email" name="email" required placeholder="请输入合法邮箱"> <button type="submit">提交</button> </form>
手机号验证
手机号没有原生的输入类型，可以通过pattern属性搭配正则表达式实现校验，以下示例匹配11位国内手机号。
<form>
<label>手机号码：</label>
<input type="tel" name="phone" required pattern="^1[3-9]d{9}$" placeholder="请输入11位手机号">
<button type="submit">提交</button>
</form>
数值范围验证
对于需要限制范围的数值输入，使用type="number"搭配min、max、step属性即可实现校验。
<form> <label>年龄：</label> <input type="number" name="age" min="1" max="120" step="1" required placeholder="请输入1-120之间的整数"> <button type="submit">提交</button> </form>
自定义验证提示
浏览器默认的验证提示样式和内容比较统一，我们可以通过setCustomValidity方法自定义提示内容，满足业务的个性化需求。
以下示例实现了自定义提示文本的逻辑，当输入不符合要求时展示开发者定义的提示内容：
// 获取输入框元素
const phoneInput = document.querySelector('input[name="phone"]');
// 监听输入事件
phoneInput.addEventListener('input', function() {
// 校验输入是否符合正则
const phoneReg = /^1[3-9]d{9}$/;
if (!phoneReg.test(this.value)) {
// 设置自定义验证提示
this.setCustomValidity('请输入正确的11位国内手机号码');
} else {
// 清空自定义提示，验证通过
this.setCustomValidity('');
}
});
验证状态判断与手动触发验证
除了表单提交时自动触发验证，我们还可以通过JavaScript手动判断输入状态或者触发验证。
<input>元素提供了validity属性，该属性是一个对象，包含多个验证状态标识：
| 属性名 | 说明 |
|---|---|
| valid | 输入内容是否通过所有验证规则，true为通过 |
| valueMissing | 是否未填写必填项，true为未填写 |
| typeMismatch | 输入内容是否符合输入类型要求，比如邮箱格式错误时为true |
| patternMismatch | 输入内容是否符合pattern定义的正则，不符合时为true |
手动触发验证可以使用checkValidity方法，该方法会返回布尔值表示验证是否通过，同时会触发浏览器的提示逻辑：
const form = document.querySelector('form');
const submitBtn = document.querySelector('button[type="submit"]');
submitBtn.addEventListener('click', function(e) {
e.preventDefault();
// 手动触发整个表单的验证
if (form.checkValidity()) {
alert('表单验证通过，可以提交数据');
// 这里可以执行表单提交的逻辑
} else {
alert('请检查表单输入内容是否符合要求');
}
});
验证失败的处理方式
当表单验证失败时，默认会阻止表单的提交行为，同时浏览器会展示对应的提示信息。如果需要在验证失败时执行自定义逻辑，可以监听表单的invalid事件：
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
input.addEventListener('invalid', function(e) {
// 阻止浏览器默认的提示行为
e.preventDefault();
// 自定义处理逻辑，比如高亮错误的输入框
this.style.borderColor = 'red';
console.log('输入内容不符合要求，请重新填写');
});
});
在实际开发中，我们可以结合原生验证属性和自定义JavaScript逻辑，既利用HTML5的原生能力减少开发量，又能满足复杂的业务校验需求，实现体验更好的表单交互效果。