编辑“︁HTML表单验证”︁

= HTML表单验证 =

'''HTML表单验证'''是确保用户输入数据符合预期格式和规则的过程，通常通过HTML5内置功能或JavaScript实现。它既能在客户端（浏览器）快速反馈错误，也能减少无效请求对服务器的压力。本指南将详细介绍原生HTML验证、JavaScript增强验证及其实用案例。

== 基本概念 ==
表单验证分为两类：
* '''客户端验证'''：在数据提交前由浏览器/JavaScript检查（更快但可绕过）
* '''服务器端验证'''：在服务器检查（必须存在作为最后防线）

客户端验证通常用于：
* 必填字段检查
* 格式验证（如邮箱、电话号码）
* 数值范围限制
* 自定义逻辑（如密码强度）

== HTML5原生验证 ==
HTML5引入了多种属性实现基础验证：

=== 常用属性 ===
{| class="wikitable"
! 属性 !! 作用 !! 示例
|-
| <code>required</code> || 标记必填字段 || <code><nowiki><input type="text" required></nowiki></code>
|-
| <code>pattern</code> || 正则表达式验证 || <code><nowiki><input pattern="[A-Za-z]{3}"></nowiki></code>
|-
| <code>min</code>/<code>max</code> || 数值范围限制 || <code><nowiki><input type="number" min="1" max="100"></nowiki></code>
|-
| <code>minlength</code>/<code>maxlength</code> || 输入长度限制 || <code><nowiki><input minlength="8" maxlength="20"></nowiki></code>
|}

=== 示例：注册表单 ===
<syntaxhighlight lang="html">
<form id="signup">
  <label>用户名：<input type="text" required minlength="4"></label>
  <label>邮箱：<input type="email" required></label>
  <label>年龄：<input type="number" min="18" max="99"></label>
  <label>密码：<input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"></label>
  <button type="submit">注册</button>
</form>
</syntaxhighlight>

当用户提交无效数据时，浏览器会自动显示错误提示（不同浏览器样式不同）。

== JavaScript增强验证 ==
原生验证功能有限，JavaScript可实现更复杂的逻辑：

=== 基本验证方法 ===
<syntaxhighlight lang="javascript">
// 获取表单元素
const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  // 阻止默认提交行为
  event.preventDefault();
  
  // 验证逻辑
  if (!validateEmail(form.email.value)) {
    alert('请输入有效的邮箱地址');
    return;
  }
  
  // 验证通过后提交
  form.submit();
});

function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}
</syntaxhighlight>

=== 实时验证反馈 ===
通过<code>input</code>事件实现输入时即时验证：
<syntaxhighlight lang="javascript">
document.getElementById('username').addEventListener('input', (e) => {
  const errorElement = document.getElementById('username-error');
  if (e.target.value.length < 4) {
    errorElement.textContent = '用户名至少4个字符';
  } else {
    errorElement.textContent = '';
  }
});
</syntaxhighlight>

== 验证状态API ==
HTML5提供DOM属性检查验证状态：

{| class="wikitable"
! 属性/方法 !! 描述
|-
| <code>willValidate</code> || 元素是否参与验证
|-
| <code>validity</code> || 返回ValidityState对象
|-
| <code>checkValidity()</code> || 检查元素是否有效
|-
| <code>setCustomValidity()</code> || 设置自定义错误消息
|}

=== ValidityState对象 ===
通过<code>element.validity</code>访问，包含布尔值属性：
* <code>valueMissing</code> - 必填字段为空
* <code>typeMismatch</code> - 类型不匹配（如email）
* <code>patternMismatch</code> - 不符合pattern规则
* <code>tooShort</code>/<code>tooLong</code> - 长度不符
* <code>rangeUnderflow</code>/<code>rangeOverflow</code> - 数值超出范围
* <code>valid</code> - 是否所有验证通过

== 自定义验证样式 ==
使用CSS伪类控制验证UI：
<syntaxhighlight lang="css">
/* 无效输入样式 */
input:invalid {
  border-color: #ff0000;
}

/* 获得焦点时的无效输入 */
input:focus:invalid {
  box-shadow: 0 0 5px #ff0000;
}

/* 有效输入样式 */
input:valid {
  border-color: #00ff00;
}
</syntaxhighlight>

== 实际案例：订单表单 ==
结合HTML与JavaScript实现完整验证流程：

<mermaid>
sequenceDiagram
    participant 用户
    participant 表单
    participant JavaScript
    
    用户->>表单: 填写数据
    表单->>JavaScript: 触发input事件
    JavaScript->>表单: 实时验证反馈
    用户->>表单: 点击提交
    表单->>JavaScript: 触发submit事件
    alt 验证通过
        JavaScript->>表单: 允许提交
    else 验证失败
        JavaScript->>用户: 显示错误提示
    end
</mermaid>

<syntaxhighlight lang="html">
<form id="orderForm">
  <div>
    <label>商品数量（1-10）：
      <input type="number" id="quantity" min="1" max="10" required>
    </label>
    <span id="quantity-error" class="error"></span>
  </div>
  
  <div>
    <label>收货电话：
      <input type="tel" id="phone" pattern="\d{3}-\d{3}-\d{4}" required>
      <small>格式：123-456-7890</small>
    </label>
  </div>
  
  <button type="submit">提交订单</button>
</form>

<script>
  const form = document.getElementById('orderForm');
  const quantityInput = document.getElementById('quantity');
  
  // 实时验证数量
  quantityInput.addEventListener('input', () => {
    const errorElement = document.getElementById('quantity-error');
    if (quantityInput.validity.rangeUnderflow) {
      errorElement.textContent = '数量不能小于1';
    } else if (quantityInput.validity.rangeOverflow) {
      errorElement.textContent = '数量不能大于10';
    } else {
      errorElement.textContent = '';
    }
  });
  
  // 提交验证
  form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();
      alert('请正确填写所有字段');
    }
  });
</script>
</syntaxhighlight>

== 高级技巧 ==
=== 自定义验证方法 ===
使用<code>setCustomValidity()</code>实现复杂规则：
<syntaxhighlight lang="javascript">
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');

function validatePassword() {
  if (password.value !== confirmPassword.value) {
    confirmPassword.setCustomValidity('两次密码输入不一致');
  } else {
    confirmPassword.setCustomValidity('');
  }
}

password.addEventListener('input', validatePassword);
confirmPassword.addEventListener('input', validatePassword);
</syntaxhighlight>

=== 异步验证 ===
通过Fetch API实现服务器端验证（如检查用户名是否已存在）：
<syntaxhighlight lang="javascript">
document.getElementById('username').addEventListener('blur', async () => {
  const username = this.value;
  const response = await fetch(`/check-username?name=${username}`);
  const { available } = await response.json();
  
  if (!available) {
    this.setCustomValidity('用户名已被占用');
  }
});
</syntaxhighlight>

== 最佳实践 ==
1. '''始终使用服务器端验证'''作为最后防线
2. 提供'''清晰明确的错误提示'''
3. 对敏感数据（如密码）避免在客户端验证时暴露规则细节
4. 考虑无障碍访问（ARIA属性）
5. 重要表单使用'''多步骤验证'''（先客户端后服务器）

== 常见问题 ==
'''Q：客户端验证能否替代服务器验证？'''<br/>
A：绝对不能！恶意用户可以完全绕过客户端验证，服务器验证是必须的安全措施。

'''Q：如何禁用浏览器的默认验证气泡？'''<br/>
A：在form标签添加<code>novalidate</code>属性，然后用自定义UI实现验证反馈。

'''Q：验证应该在什么时机触发？'''<br/>
A：推荐组合使用：
* <code>blur</code>事件（字段失去焦点时）
* <code>input</code>事件（输入时实时反馈）
* <code>submit</code>事件（最终检查）

通过掌握这些技术，您将能够创建既用户友好又安全可靠的网页表单。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML与JavaScript交互]]