编辑“︁HTML表单验证”︁

= HTML表单验证 =

'''HTML表单验证'''是确保用户输入数据符合预期格式或规则的过程，通常在表单提交到服务器之前完成。它能够提升用户体验、减少无效请求，并增强数据安全性。验证可分为'''客户端验证'''（通过HTML5或JavaScript实现）和'''服务器端验证'''（通过后端语言如PHP、Python等实现）。本文重点介绍客户端验证。

== 验证类型 ==
HTML5提供了多种内置验证机制：

=== 1. 必填字段验证 ===
使用<code>required</code>属性标记字段为必填项：
<syntaxhighlight lang="html">
<input type="text" name="username" required>
</syntaxhighlight>
若用户未填写，浏览器会显示默认错误提示。

=== 2. 数据类型验证 ===
通过<code>type</code>属性指定输入类型：
<syntaxhighlight lang="html">
<input type="email" name="user_email">  <!-- 验证电子邮件格式 -->
<input type="url" name="website">      <!-- 验证URL格式 -->
<input type="number" name="age" min="18" max="99"> <!-- 数值范围验证 -->
</syntaxhighlight>

=== 3. 正则表达式验证 ===
使用<code>pattern</code>属性定义自定义规则：
<syntaxhighlight lang="html">
<input type="text" name="zipcode" pattern="\d{5}" title="5位数字邮编">
</syntaxhighlight>

== JavaScript增强验证 ==
当HTML5验证不足时，可通过JavaScript实现更复杂的逻辑：

<syntaxhighlight lang="javascript">
document.getElementById("myForm").addEventListener("submit", function(event) {
    const password = document.getElementById("password").value;
    if (password.length < 8) {
        alert("密码至少需要8个字符");
        event.preventDefault(); // 阻止表单提交
    }
});
</syntaxhighlight>

== 验证反馈 ==
浏览器默认会显示验证错误，但可通过CSS自定义样式：
<syntaxhighlight lang="css">
input:invalid {
    border-color: #ff0000;
}
input:valid {
    border-color: #00ff00;
}
</syntaxhighlight>

== 实际案例 ==
'''用户注册表单验证'''：
<syntaxhighlight lang="html">
<form id="registerForm">
    <label>用户名：<input type="text" name="username" required minlength="4"></label>
    <label>邮箱：<input type="email" name="email" required></label>
    <label>密码：<input type="password" name="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"></label>
    <button type="submit">注册</button>
</form>
</syntaxhighlight>

'''验证流程'''：
<mermaid>
graph TD
    A[用户提交表单] --> B{HTML5验证}
    B -- 通过 --> C[JavaScript验证]
    B -- 失败 --> D[显示错误]
    C -- 通过 --> E[提交到服务器]
    C -- 失败 --> D
</mermaid>

== 数学验证示例 ==
对于需要数学计算的验证（如验证码校验），可使用公式：
<math>
\text{验证码} = (x^2 + 3y) \mod 10 \quad \text{其中}\, x,y \in \mathbb{Z}
</math>

== 注意事项 ==
* 客户端验证不能替代服务器端验证（用户可能禁用JavaScript）
* 复杂的业务规则（如用户名唯一性检查）必须通过服务器验证
* 始终提供清晰的错误提示（通过<code>title</code>属性或自定义元素）

== 高级技巧 ==
对于需要动态验证的场景，可使用<code>Constraint Validation API</code>：
<syntaxhighlight lang="javascript">
const emailInput = document.querySelector('input[type="email"]');
emailInput.addEventListener("input", () => {
    if (emailInput.validity.typeMismatch) {
        emailInput.setCustomValidity("请输入有效的电子邮件地址");
    } else {
        emailInput.setCustomValidity("");
    }
});
</syntaxhighlight>

== 参见 ==
* [[HTML表单基础]]（基础概念）
* [[JavaScript DOM操作]]（高级验证实现）
* [[Web安全实践]]（验证与安全的关系）

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML表单]]