HTML5表单验证技巧：required、pattern和自定义错误提示

HTML5引入了强大的表单验证功能，使得前端验证变得更加简单和高效。本文将介绍三种核心的表单验证技巧：required属性、pattern属性以及如何自定义错误提示信息。

1. required属性 - 必填字段验证

required属性是最简单的表单验证方式，它指定输入字段在提交表单前必须填写。

html 复制代码

<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>

当用户尝试提交空字段时，浏览器会自动显示默认的错误提示

2. pattern属性 - 正则表达式验证

pattern属性允许我们使用正则表达式来定义输入值的格式要求。

html 复制代码

<label for="phone">电话号码：</label>
<input type="text" id="phone" name="phone" 
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
       placeholder="格式：123-456-7890">

这个例子要求电话号码必须符合"XXX-XXX-XXXX"的格式。如果输入不符合模式，浏览器会显示默认错误提示

3. 自定义错误提示信息

虽然浏览器提供了默认的错误提示，但我们可以使用JavaScript来自定义更友好的提示信息。

方法一：使用title属性提供额外提示

html 复制代码

<input type="text" id="zipcode" name="zipcode" 
       pattern="\d{5}" 
       title="请输入5位数字的邮政编码">

方法二：使用setCustomValidity()方法完全自定义

html 复制代码

<form id="myForm">
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  
  <label for="confirm_password">确认密码：</label>
  <input type="password" id="confirm_password" name="confirm_password" required>
  
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  const password = document.getElementById('password');
  const confirmPassword = document.getElementById('confirm_password');
  
  if (password.value !== confirmPassword.value) {
    confirmPassword.setCustomValidity('两次输入的密码不一致');
  } else {
    confirmPassword.setCustomValidity('');
  }
});
</script>

4. 综合案例：完整的表单验证

下面是一个结合了所有技巧的完整示例：

html 复制代码

<form id="registrationForm">
  <div>
    <label for="email">电子邮箱：</label>
    <input type="email" id="email" name="email" required
           title="请输入有效的电子邮箱地址">
  </div>
  
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" 
           pattern="[A-Za-z0-9]{4,12}" required
           title="用户名必须是4-12位字母或数字">
  </div>
  
  <div>
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" min="18" max="99" required
           title="年龄必须在18-99岁之间">
  </div>
  
  <div>
    <label for="website">个人网站：</label>
    <input type="url" id="website" name="website"
           pattern="https?://.+" 
           title="请输入以http://或https://开头的URL">
  </div>
  
  <button type="submit">注册</button>
</form>

<script>
document.getElementById('registrationForm').addEventListener('submit', function(e) {
  const ageInput = document.getElementById('age');
  if (ageInput.value < 18) {
    ageInput.setCustomValidity('您必须年满18岁才能注册');
  } else {
    ageInput.setCustomValidity('');
  }
});
</script>

5. 样式化验证状态

我们还可以使用CSS伪类来样式化不同验证状态的表单元素：

css 复制代码

/* 有效的输入 */
input:valid {
  border-color: #4CAF50;
}

/* 无效的输入 */
input:invalid {
  border-color: #f44336;
}

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

总结

HTML5表单验证提供了强大的客户端验证功能，可以显著提升用户体验：

required属性确保必填字段不为空
pattern属性通过正则表达式验证输入格式
自定义错误提示使验证信息更加友好
结合CSS可以创建视觉反馈

虽然HTML5验证很方便，但请记住它不能替代服务器端验证，因为用户可以禁用JavaScript或绕过客户端验证。