1. 基本的输入验证：
确保必填字段不为空，并根据需要进行其他基本的输入验证，比如长度、格式等。
var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username.trim() === "") {
alert("用户名不能为空");
event.preventDefault();
}
if (password.trim() === "") {
alert("密码不能为空");
event.preventDefault();
}
});
2. 正则表达式验证：
使用正则表达式来检查输入是否符合特定的模式，比如邮箱、电话号码等。
var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
var email = document.getElementById("email").value;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!emailPattern.test(email)) {
alert("请输入有效的邮箱地址");
event.preventDefault();
}
});
3. 自定义验证函数：
定义自己的验证函数，根据特定条件进行验证。
function validateAge() {
var age = document.getElementById("age").value;
if (isNaN(age) || age < 0 || age > 150) {
alert("请输入有效的年龄");
return false;
}
return true;
}
var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
if (!validateAge()) {
event.preventDefault();
}
});
4. 实时验证：
在用户输入时，实时验证字段，给予用户及时的反馈。
var usernameInput = document.getElementById("username");
usernameInput.addEventListener("input", function() {
var username = this.value;
if (username.length < 5) {
this.setCustomValidity("用户名长度至少为 5 个字符");
} else {
this.setCustomValidity("");
}
});
5. 禁用 HTML5 验证：
如果使用了 HTML5 内置的表单验证，可以通过设置 novalidate 属性来禁用，然后使用 JavaScript 进行自定义验证。
<form id="myForm" novalidate>
<!-- 表单内容 -->
</form>
这些是一些常见的 JavaScript 表单验证技巧。根据具体的应用场景，可以结合不同的验证方法来确保表单输入的准确性和安全性。在实际开发中，对于涉及到用户输入的应用，健壮的表单验证是非常重要的一环。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12802/JavaScript