HTML表单进阶：验证与样式

掌握表单内置验证、正则模式、自定义错误提示和CSS美化技巧。 · 难度：入门 · +15XP

一、表单验证基础

HTML5为表单提供了强大的客户端验证能力，无需JavaScript即可实现基本的输入检查。常用验证属性包括：required（必填）、minlength/maxlength（字符长度）、min/max（数值范围）和pattern（正则表达式）。

1. 必填字段

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  <input type="submit" value="提交">
</form>

2. 使用正则模式

通过pattern属性指定正则表达式，例如只允许字母和空格：

<input type="text" pattern="[A-Za-z ]+" title="只允许字母和空格">

二、自定义验证样式

利用CSS伪类:valid和:invalid可以美化验证状态：

input:valid {
  border: 2px solid green;
}
input:invalid {
  border: 2px solid red;
}

三、错误消息自定义

使用JavaScript的setCustomValidity()方法可覆盖默认提示：

document.getElementById('email').addEventListener('input', function(e) {
  if (this.value.includes('@')) {
    this.setCustomValidity('');
  } else {
    this.setCustomValidity('请输入有效的邮箱地址');
  }
});

四、综合示例

<form id="myForm">
  <label for="phone">手机号：</label>
  <input type="tel" id="phone" name="phone"
         pattern="[0-9]{11}"
         placeholder="11位数字"
         required>
  <input type="submit">
</form>

练习提示：尝试在starter_code中添加一个密码字段，要求至少8位、包含大写字母和数字，并用红色边框提示无效输入。