HTML pattern正则验证

pattern属性允许使用正则表达式定义输入值的格式规则，浏览器在表单提交时自动进行匹配验证。

基本语法

<input type="text" pattern="正则表达式" title="格式说明">

工作原理

1. 用户输入内容
2. 表单提交时浏览器将输入值与pattern正则匹配
3. 匹配失败则阻止提交，显示提示信息
4. 匹配成功则正常提交

常用正则示例

手机号验证

<form>
  <label>手机号：</label>
  <input type="tel" name="phone"
         pattern="^1[3-9]\d{9}$"
         title="请输入11位有效手机号"
         placeholder="请输入手机号"
         required>
  <button type="submit">提交</button>
</form>

身份证号验证

<form>
  <label>身份证号：</label>
  <input type="text" name="idcard"
         pattern="^\d{17}[\dXx]$"
         title="请输入18位身份证号"
         placeholder="请输入身份证号">
  <button type="submit">提交</button>
</form>

邮编验证

<form>
  <label>邮政编码：</label>
  <input type="text" name="zipcode"
         pattern="^\d{6}$"
         title="请输入6位邮政编码">
  <button type="submit">提交</button>
</form>

用户名验证

<form>
  <label>用户名：</label>
  <input type="text" name="username"
         pattern="^[a-zA-Z]\w{5,15}$"
         title="6-16位，字母开头，可含数字下划线"
         placeholder="请输入用户名">
  <button type="submit">提交</button>
</form>

密码强度验证

<form>
  <label>密码：</label>
  <input type="password" name="password"
         pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,16}$"
         title="8-16位，需包含大小写字母和数字"
         placeholder="请输入密码">
  <button type="submit">提交</button>
</form>

配合CSS验证反馈

<style>
  input:valid {
    border: 2px solid green;
  }
  input:invalid:not(:placeholder-shown) {
    border: 2px solid red;
  }
</style>

<form>
  <input type="text"
         pattern="^[A-Z]{2}\d{4}$"
         placeholder="格式：AB1234"
         title="2个大写字母+4个数字">
  <button type="submit">提交</button>
</form>

JavaScript检测验证状态

<form id="myForm">
  <input type="text" id="codeInput"
         pattern="^[A-Z]{3}\d{3}$"
         title="3个大写字母+3个数字">
  <span id="msg"></span>
  <button type="submit">提交</button>
</form>

<script>
  const input = document.getElementById('codeInput');
  const msg = document.getElementById('msg');

  input.addEventListener('input', () => {
    if (input.validity.patternMismatch) {
      msg.textContent = '格式错误：' + input.title;
    } else {
      msg.textContent = '';
    }
  });
</script>

注意：pattern正则默认不需要^和$包裹符，但为了精确匹配建议加上。验证仅在表单提交或调用checkValidity()时触发。

要点总结

1. pattern值必须是有效的JavaScript正则表达式
2. title属性用于提示用户正确的格式要求
3. 验证失败时validity.patternMismatch为true
4. 适用于text、tel、email、url、password等文本类型
5. 正则表达式前后建议添加^和$确保完整匹配