在现代网页设计中，表单验证是一个重要的环节，它不仅可以提高用户体验，还可以减少服务器端的无效请求。然而，仅依赖客户端JavaScript进行表单验证是不推荐的，因为用户可能出于各种原因禁用JavaScript。本文将介绍如何使用JavaScript增强表单验证，同时确保在服务器端也能进行验证。
首先，来看一个简单的表单，它包含两个必填字段：电子邮件和对文章的有用性评价。
在JavaScript中，将创建一个名为validateForms的函数，该函数将控制表单的验证过程。首先，需要获取页面上所有的表单元素。
function validateForms() {
if (!document.getElementsByTagName) return false;
var elementsForms = document.getElementsByTagName("form");
for (var intCounter = 0; intCounter < elementsForms.length; intCounter++) {
validateForm(elementsForms[intCounter]);
}
}
接下来，将遍历这些表单，并为每个表单调用validateForm函数。
function validateForm(currentForm) {
var blnvalidate = true;
var elementsInputs = currentForm.getElementsByTagName("input");
for (var intCounter = 0; intCounter < elementsInputs.length; intCounter++) {
if (elementsInputs[intCounter].className == "reqemail") {
if (!validateEmail(elementsInputs[intCounter])) {
blnvalidate = false;
alert('请输入有效的电子邮件地址');
}
} else if (elementsInputs[intCounter].className == "reqquestion") {
if (!validateText(elementsInputs[intCounter])) {
blnvalidate = false;
alert('请告诉对这篇文章的看法');
}
}
}
return blnvalidate;
}
为了验证电子邮件地址，将使用正则表达式创建一个简单的函数。
function validateEmail(inputElement) {
var emailFilter = /^[^@]+@[^@]+\.[^@]{2,3}$/;
return emailFilter.test(inputElement.value);
}
同样，需要验证用户是否填写了对文章的评价。
function validateText(inputElement) {
return inputElement.value !== "";
}
最后，将从HTML页面中移除所有JavaScript代码，并将onsubmit函数调用应用到所有表单标签中。
function validateForms() {
var elementsForms = document.getElementsByTagName("form");
for (var intCounter = 0; intCounter < elementsForms.length; intCounter++) {
elementsForms[intCounter].onsubmit = function() {
return validateForm(this);
};
}
}
在JavaScript文件的底部，注册一个事件，以便在页面加载时调用validateForms函数。
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
};
}
}
addLoadEvent(validateForms);