HTML5注册表单设计与验证教程

<form action="/register" method="post" id="registerForm">
  <label for="username">用户名：</label>
  &lt;input type=&quot;text&quot; id=&quot;username&quot; name=&quot;username&quot; required minlength=&quot;3&quot; maxlength=&quot;20&quot;&gt;

  <label for="email">邮箱：</label>
  &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; required&gt;

  <label for="password">密码：</label>
  &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; required minlength=&quot;6&quot;&gt;

  <label for="confirmPassword">确认密码：</label>
  &lt;input type=&quot;password&quot; id=&quot;confirmPassword&quot; name=&quot;confirmPassword&quot; required&gt;

  <label for="phone">手机号：</label>
  &lt;input type=&quot;tel&quot; id=&quot;phone&quot; name=&quot;phone&quot; pattern=&quot;[0-9]{11}&quot; placeholder=&quot;请输入11位手机号&quot;&gt;

  <button type="submit">注册</button>
</form>

document.getElementById('registerForm').addEventListener('submit', function(e) {
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirmPassword').value;

  if (password !== confirmPassword) {
    alert('两次输入的密码不一致！');
    e.preventDefault(); // 阻止表单提交
  }
});

document.getElementById('confirmPassword').addEventListener('input', function() {
  const password = document.getElementById('password').value;
  const confirmPassword = this.value;
  if (confirmPassword && password !== confirmPassword) {
    this.setCustomValidity('密码不匹配');
  } else {
    this.setCustomValidity('');
  }
});

input:valid {
  border-color: green;
  outline: 1px solid #aef;
}

input:invalid {
  border-color: red;
  outline: 1px solid #fda;
}

input:focus:invalid {
  box-shadow: 0 0 5px rgba(255,0,0,0.3);
}