表单验证是 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，你可以创建强大且用户友好的表单验证机制。记住，客户端验证不能替代服务器端验证，两者应该结合使用以确保数据的安全性和完整性。希望本文能帮助你更好地理解和实现表单验证。