✓ 什么是表单验证？

表单验证就是检查用户输入的数据是否正确和完整的过程。就像老师检查你的作业一样，验证API会检查用户填写的信息是否合格。

为什么要验证？有三个主要原因：

• 确保数据类型正确：例如邮箱要有”@”符号，电话号码只能是数字
• 防止恶意输入：阻止黑客输入有害代码攻击网站
• 提升用户体验：即时反馈错误，减少表单提交失败

✓ HTML5内置验证

HTML5本身就提供了一些简单的验证功能，不需要JavaScript就能使用：

• required：必填字段，不能为空
• type="email"：自动验证邮箱格式
• type="url"：验证网址格式
• type="number"：只能输入数字
• pattern：使用正则表达式自定义验证规则
• min/max：设置数值范围
• minlength/maxlength：设置文本长度限制

<input type="email" required placeholder="输入邮箱">
<input type="number" min="18" max="100" placeholder="年龄">
<input type="text" pattern="[A-Za-z]{3}" title="三个字母">

✓ 约束验证API是什么？

约束验证API是一组JavaScript方法和属性，让你可以用代码控制验证过程，实现更灵活的表单验证。

想象一下，HTML5验证是自动挡汽车，而约束验证API是手动挡，给你更多控制权。

主要组成部分：

• DOM元素的属性：获取验证状态
• DOM元素的方法：触发验证操作
• 事件：在验证过程中执行自定义代码

✓ 重要的验证属性

表单元素有一系列属性帮你获取验证状态：

• validity：返回ValidityState对象，包含详细验证状态
• validationMessage：浏览器生成的错误提示信息
• willValidate：检查元素是否会被验证
• validity.valid：输入值是否有效（true/false）
• validity.valueMissing：是否缺少必填值
• validity.typeMismatch：输入值是否与类型不匹配

const emailInput = document.getElementById('email');

// 检查输入是否有效
if (!emailInput.validity.valid) {
    // 显示错误信息
    console.log(emailInput.validationMessage);
    
    // 检查具体错误类型
    if (emailInput.validity.valueMissing) {
        console.log("请输入邮箱地址");
    }
}

✓ 核心验证方法

以下是常用的验证方法：

• checkValidity()：检查元素是否有效，返回true/false
• reportValidity()：检查有效性并显示错误提示
• setCustomValidity(message)：设置自定义错误消息

// 检查单个输入框
const isEmailValid = emailInput.checkValidity();

// 检查整个表单
const form = document.getElementById('myForm');
const isFormValid = form.checkValidity();

// 设置自定义错误信息
passwordInput.setCustomValidity('密码必须包含数字和字母');

// 清除自定义错误
passwordInput.setCustomValidity('');

✓ 验证相关事件

这些事件让你在验证过程中执行自定义逻辑：

• invalid：当元素验证失败时触发
• input：输入值改变时触发（适合实时验证）
• change：元素值改变且失去焦点时触发

// 为输入框添加验证失败事件
emailInput.addEventListener('invalid', function(e) {
    // 阻止浏览器显示默认错误提示
    e.preventDefault();
    
    // 显示自定义错误提示
    showCustomError("请输入有效的邮箱地址");
});

// 实时验证
emailInput.addEventListener('input', function() {
    if (emailInput.validity.valid) {
        hideError();
    } else {
        showError("邮箱格式不正确");
    }
});

✓ 自定义验证

当HTML5验证不够用时，可以创建自定义验证：

• 使用setCustomValidity()设置自定义错误
• 在事件处理程序中执行复杂验证逻辑
• 使用正则表达式验证复杂模式
• 验证多个字段的关联关系（如密码确认）

// 密码强度验证示例
passwordInput.addEventListener('input', function() {
    const password = passwordInput.value;
    let message = '';
    
    if (password.length < 8) {
        message = '密码至少8个字符';
    } else if (!/[A-Z]/.test(password)) {
        message = '需要至少一个大写字母';
    } else if (!/[0-9]/.test(password)) {
        message = '需要至少一个数字';
    }
    
    passwordInput.setCustomValidity(message);
});

// 密码匹配验证
confirmInput.addEventListener('input', function() {
    if (confirmInput.value !== passwordInput.value) {
        confirmInput.setCustomValidity('两次输入的密码不一致');
    } else {
        confirmInput.setCustomValidity('');
    }
});

✓ 表单验证最佳实践

• 实时反馈：用户输入时即时提示错误，不要在提交时才显示
• 清晰的错误提示：准确描述问题及解决方法
• 包容性设计：考虑各种输入格式（如电话号码分隔符）
• 双重验证：前端验证用户体验，后端验证数据安全
• 避免过度验证：只在必要时要求验证
• 辅助功能：确保错误提示对屏幕阅读器友好