表单验证是 Web 开发中不可或缺的一部分，它确保用户输入的数据符合预期格式和要求。通过客户端验证，我们可以提高用户体验，减少不必要的服务器请求。然而，客户端验证并不能替代服务器端验证，因为客户端验证可以被绕过。本文将介绍如何使用 JavaScript 和 HTML5 实现强大的表单验证。
HTML5 内置验证
HTML5 提供了一些内置的表单验证功能，例如 required, min, max, pattern 等。这些属性可以简单地添加到表单元素中，以实现基本的验证。
javascript"><form><label for="username">用户名:</label><input type="text" id="username" name="username" required minlength="3" maxlength="20"><label for="email">邮箱:</label><input type="email" id="email" name="email" required><label for="password">密码:</label><input type="password" id="password" name="password" required minlength="8"><input type="submit" value="提交">
</form>在这个例子中，required 属性确保字段不能为空，minlength 和 maxlength 属性限制了用户名的长度，type="email" 确保输入的邮箱地址格式正确。
JavaScript 自定义验证
虽然 HTML5 提供了基本的验证功能，但在某些情况下，我们需要更复杂的验证逻辑。这时，可以使用 JavaScript 编写自定义的验证逻辑。
javascript"><form id="myForm"><label for="username">用户名:</label><input type="text" id="username" name="username"><label for="email">邮箱:</label><input type="email" id="email" name="email"><label for="password">密码:</label><input type="password" id="password" name="password"><input type="submit" value="提交">
</form><script>document.getElementById('myForm').addEventListener('submit', function(event) {event.preventDefault(); // 阻止表单提交let username = document.getElementById('username').value;let email = document.getElementById('email').value;let password = document.getElementById('password').value;if (username.length < 3 || username.length > 20) {alert('用户名必须在 3 到 20 个字符之间');return;}if (!validateEmail(email)) {alert('请输入有效的邮箱地址');return;}if (password.length < 8) {alert('密码必须至少 8 个字符');return;}// 如果所有验证都通过，可以提交表单alert('表单验证通过，可以提交表单');// this.submit(); // 如果需要提交表单，可以取消注释这行});function validateEmail(email) {const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;return re.test(String(email).toLowerCase());}
</script>在这个例子中，我们使用 JavaScript 监听表单的 submit 事件，并在事件处理函数中进行自定义验证。如果验证失败，阻止表单提交并显示错误提示。
使用正则表达式进行验证
正则表达式是验证字符串格式的强大工具。例如，验证邮箱、电话号码等。
javascript">function validateEmail(email) {const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;return re.test(String(email).toLowerCase());
}function validatePhone(phone) {const re = /^\d{10}$/;return re.test(String(phone));
}使用表单验证 API
HTML5 提供了一些内置的表单验证 API，这些 API 可以帮助你更容易地实现表单验证。
checkValidity()
checkValidity() 方法用于检查表单或表单元素是否满足所有的约束条件。如果满足，返回 true，否则返回 false。
javascript">let form = document.getElementById('myForm');form.addEventListener('submit', function(event) {if (!form.checkValidity()) {event.preventDefault();alert('请填写所有必填字段');}
});reportValidity()
reportValidity() 方法与 checkValidity() 类似，但它会触发浏览器内置的验证提示，显示错误信息。
javascript">let form = document.getElementById('myForm');form.addEventListener('submit', function(event) {if (!form.reportValidity()) {event.preventDefault();}
});validity 对象
每个表单元素都有一个 validity 对象，它包含多个布尔属性，用于表示不同的验证状态。
javascript">let email = document.getElementById('email');email.addEventListener('input', function() {if (email.validity.typeMismatch) {email.setCustomValidity('请输入有效的邮箱地址');} else {email.setCustomValidity('');}
});validity 对象的常见属性包括：
-
valid: 如果元素满足所有的约束条件，返回true。 -
valueMissing: 如果元素是必填项但没有值，返回true。 -
typeMismatch: 如果元素的值不符合type属性的要求（例如email或url），返回true。 -
patternMismatch: 如果元素的值不符合pattern属性的要求，返回true。 -
tooLong: 如果元素的值超过了maxLength属性的限制，返回true。 -
tooShort: 如果元素的值少于minLength属性的限制，返回true。 -
rangeUnderflow: 如果元素的值小于min属性的值，返回true。 -
rangeOverflow: 如果元素的值大于max属性的值，返回true。 -
stepMismatch: 如果元素的值不符合step属性的要求，返回true。 -
badInput: 如果浏览器无法将用户的输入转换为有效的值（例如在number输入框中输入了非数字字符），返回true。 -
customError: 如果元素设置了自定义的验证错误信息，返回true。
validationMessage 属性
validationMessage 属性返回当前表单元素的验证错误信息。如果元素没有错误，返回空字符串。
javascript">let email = document.getElementById('email');email.addEventListener('input', function() {if (!email.checkValidity()) {console.log(email.validationMessage);}
});使用第三方库
有许多第三方库可以简化表单验证的过程，例如：
-
Validator.js: 一个简单易用的字符串验证库。
-
Joi: 一个强大的数据验证库，适用于复杂的验证场景。
-
Yup: 一个用于对象模式验证的库，常用于表单验证。
javascript">// 使用 Yup 进行表单验证
const yup = require('yup');const schema = yup.object().shape({username: yup.string().min(3).max(20).required(),email: yup.string().email().required(),password: yup.string().min(8).required(),
});schema.validate({username: 'john',email: 'john@example.com',password: 'password123'
}).then(function(valid) {console.log('Valid');
}).catch(function(err) {console.log(err.errors);
});实时验证
你可以在用户输入时实时验证表单字段，提供即时反馈。
javascript"><form id="myForm"><label for="username">用户名:</label><input type="text" id="username" name="username"><span id="usernameError" style="color:red;"></span><label for="email">邮箱:</label><input type="email" id="email" name="email"><span id="emailError" style="color:red;"></span><label for="password">密码:</label><input type="password" id="password" name="password"><span id="passwordError" style="color:red;"></span><input type="submit" value="提交">
</form><script>document.getElementById('username').addEventListener('input', function() {let username = this.value;let errorSpan = document.getElementById('usernameError');if (username.length < 3 || username.length > 20) {errorSpan.textContent = '用户名必须在 3 到 20 个字符之间';} else {errorSpan.textContent = '';}});document.getElementById('email').addEventListener('input', function() {let email = this.value;let errorSpan = document.getElementById('emailError');if (!validateEmail(email)) {errorSpan.textContent = '请输入有效的邮箱地址';} else {errorSpan.textContent = '';}});document.getElementById('password').addEventListener('input', function() {let password = this.value;let errorSpan = document.getElementById('passwordError');if (password.length < 8) {errorSpan.textContent = '密码必须至少 8 个字符';} else {errorSpan.textContent = '';}});function validateEmail(email) {const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;return re.test(String(email).toLowerCase());}
</script>总结
通过结合 HTML5 内置验证、JavaScript 自定义验证、正则表达式和表单验证 API，你可以创建强大且用户友好的表单验证机制。记住，客户端验证不能替代服务器端验证，两者应该结合使用以确保数据的安全性和完整性。希望本文能帮助你更好地理解和实现表单验证。
