HTML5表单验证与CSS3交互效果

HTML5 的表单验证功能挺强的，配合 CSS3 还能做出有感觉的交互效果。这套表单提交验证的代码就是个不错的例子，常用的required、pattern都有用上，配合:valid和:invalid伪类，验证通过没通过，一眼就能看出来。

表单里的type="email"、type="date"这些类型也挺实用，浏览器自带校验，省了不少事。想让验证更灵活点？加上pattern写正则就行，像用户名只能输字母数字，3 位起步那种，直接写死：

<input type="text" name="username" required pattern="^[a-zA-Z0-9]{3,}$">

样式方面也别忽略了，:valid配border-color: green，:invalid就来个红框，一下就知道哪有问题：

input:valid {
  border-color: green;
}
input:invalid {
  border-color: red;
}

你要是不想用浏览器默认的验证样式，还能加novalidate手动控制，或者直接用 JavaScript 配FormData和fetch搞个 AJAX 提交，体验会流畅不少：

var formData = new FormData(document.querySelector('form'));
fetch('/submit', {
  method: 'POST',
  body: formData
}).then(function(response) {
  // 响应
});

，这套表单验证代码比较全，样式好改，逻辑也不复杂，新手练手或者老手改造都挺合适。想看更多类似的，还可以看看这些：

• 使用 HTML5 和 CSS3 表单验证功能
• HTML5 表单验证源码
• HTML5 登录表单验证 Tooltip 验证提示
• javascript html5 实现表单验证

如果你做前端页面表单比较多，可以把这些都收藏下，用起来会省不少时间。