JavaScript 表单验证方法：添加 required 属性标识必填字段。添加事件监听器监视表单提交。验证字段值是否满足条件（必填、字符长度、电子邮件格式、数字格式、密码强度）。使用自定义验证方法显示错误消息和错误样式。提交通过验证的表单。
如何在 JavaScript 中进行表单验证
在 Web 应用程序开发中，验证用户输入至关重要，以确保数据的准确性和一致性。JavaScript 作为一种广泛使用的前端编程语言，提供了强大的功能来实现表单验证。
步骤：
1. HTML 标记元素
为要验证的字段添加 required 属性，例如：
2. 添加 JavaScript 代码
使用 addEventListener() 事件监听器监视表单提交，例如：
document.querySelector('form').addEventListener('submit', (event) => {
// 阻止表单自动提交
event.preventDefault();
// 验证逻辑
});3. 验证逻辑
在验证逻辑中，检查每个字段的值是否满足以下条件：
-
必填字段：
required属性验证 -
字符输入长度：
value.length属性 -
电子邮件格式：
value.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/) -
数字格式：
Number.isNaN(parseInt(value)) - 密码强度：自定义规则，如检查字符长度、特殊字符等
4. 错误处理
- 使用
setCustomValidity()方法显示错误信息，例如：
document.querySelector('input[name="name"]').setCustomValidity('姓名不能为空');- 使用
classList添加错误样式，例如：
document.querySelector('input[name="name"]').classList.add('error');5. 提交表单
- 如果所有字段验证通过，提交表单，例如：
event.target.submit();
示例：
document.querySelector('form').addEventListener('submit', (event) => {
event.preventDefault();
let name = document.querySelector('input[name="name"]').value;
let email = document.querySelector('input[name="email"]').value;
if (name.length === 0) {
document.querySelector('input[name="name"]').setCustomValidity('姓名不能为空');
} else {
document.querySelector('input[name="name"]').setCustomValidity('');
}
if (!email.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) {
document.querySelector('input[name="email"]').setCustomValidity('请输入有效的电子邮件地址');
} else {
document.querySelector('input[name="email"]').setCustomValidity('');
}
if (name.length === 0 || !email.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) {
event.target.classList.add('error');
} else {
event.target.classList.remove('error');
event.target.submit();
}
}); 
