验证表单并显示错误信息
本文的目的是验证整个表单或单个字段并动态地显示错误信息。实现表单动态验证的方法有两种。第一种方法是HTML DOM规范的组成部分，即所有的<form>元素都有一个elements的属性，这个属性是一个包含表单所有字段的数组，使用这个数组就可以遍历所有可能的字段，并检查错误。第二种方法是为所有字段添加class属性并以此来触发验证规则。比如，有class为required的字段则触发必填项的验证。利用这两种方法就可以编写两个通用的函数，用来验证整个表单和单个字段。
[code lang="js"]
// 验证表单所有字段的函数
// form参数是表单的引用
// load参数是一个布尔参数，表示验证还是是在页面加载时执行还是动态执行
function validateForm( form, load ) {
var valid = true;
// 遍历表单的所有字段
// form.elements是表单所有字段的一个数组
for ( var i = 0; i < form.elements.length; i++ ) {
// 隐藏错误信息
hideErrors( form.elements[i] );
// 检查字段是否包含正确的内容
if ( ! validateField( form.elements[i], load ) )
valid = false;
}
// 如果正确返回true，否则返回false
return valid;
}
// 验证单个字段
function validateField( elem, load ) {
var errors = [];
// 遍历所有的验证
for ( var name in errMsg ) {
// 查看字段是否是指定的错误类型
var re = new RegExp("(^|\\s)" + name + "(\\s|$)");
// 测试正则表达式
if ( re.test( elem.className ) && !errMsg[name].test( elem, load ) )
// 如果没有通过验证，则把错误信息添加到列表中
errors.push( errMsg[name].msg );
}
// 如果存在错误信息，则显示出来
if ( errors.length )
showErrors( elem, errors );
// 如果验证没有通过，则返回false
return errors.length > 0;
}
[/code]
上面的代码还缺少两个必要的函数，即隐藏和显示验证错误信息的函数。错误信息显示在每个字段后。
[code lang="js"]
// 隐藏错误信息
function hideErrors( elem ) {
// 获取下一个元素
var next = elem.nextSibling;
// 如果下一个元素是ul并有名称为errors的class
if ( next && next.nodeName == "UL" && next.className == "errors" )
// 删除它
elem.parenttNode.removeChild( next );
}
// 显示错误信息
function showErrors( elem, errors ) {
// 获取下一个元素
var next = elem.nextSibling;
// 如果下一个元素不是ul，或者没有名称为errors的class
if ( next && ( next.nodeName != "UL" || next.className != "errors" ) ) {
// 创建ul和类名
next = document.createElement( "ul" );
next.className = "errors";
// 并插入到DOM中
elem.paretNode.insertBefore( next, elem.nextSibling );
}
// 遍历所有的错误信息
for ( var i = 0; i < errors.length; i++ ) {
// 为每条错误信息创建li
var li = document.createElement( "li" );
li.innerHTML = errors[i];
// 插入到DOM中
next.appendChild( li );
}
}
[/code]
实现了所有的JavaScript代码，接下来就是利用CSS来美化错误信息的显示，CSS如下：
[code lang="html"]
ul.errors {
list-style: none;
background: #FFCECE;
padding: 3px;
margin: 3px 0 3px 70px;
font-size: 0.9em;
width: 165px;
}
[/code]
最终效果如下图所示：
<img src="http://www.everyinch.net/wp-content/uploads/2013/12/validate.jpg" alt="validate" width="308" height="478" class="alignnone size-full wp-image-4053" />
表单验证比较麻烦的一点是决定何时才是显示错误信息的合适时机。有3个不同的验证时间点：表单提交时、字段改变时和页面加载时。它们都有各自的优缺点。
1. 表单提交时验证
在表单提交时验证是最常用的技术，因为它跟普通的表单验证技术最为接近。为了监听表单的提交，必须绑定一个事件处理函数。一旦表单提交就由规则集合指定的各种规则来进行验证。如果某个字段没有通过验证，则停止表单的提交并显示相应的错误信息。
[code lang="js"]
function watchForm( form ) {
// 监听表单的提交事件
addEvent( form, 'submit', function(){
// 确保表单字段通过验证
return validateForm( form );
});
}
// 查找页面中的第一个表单
var form = document.getElementsByTagName( "form" )[0];
// 并在它提交的时候验证它
watchForm( form );
[/code]
2. 在字段改变时验证
第二种方法是监听表单内单个字段的变化。虽然可以通过监听keypres事件，来监听用户的输入。但这种做法会严重打扰用户，所以不值得推荐。另一种做法是直到用户离开字段才进行验证，这样使用户体验更为平滑。因为用户有充分的事件来完整填写所需要的信息，同时仍能较快地收到验证的错误信息。
[code lang="js"]
function watchFields( form ) {
// 遍历表单的所有字段
for ( var i = 0; i < form.elements.length; i++ ) {
// 监听blur事件
addEvent( form.elements[i], 'blur', function(){
// 一旦失去焦点，则验证该字段
return validateField( this );
});
}
}
// 查找页面中的第一个表单
var form = document.getElementsByTagName( "form" )[0];
// 监听表单内所有字段的变化
watchFields( form );
[/code]
3. 在页面加载时验证
在页面加载时验证并不像前两种方法那么常见，但在某些边缘场合也是非常重要的。假设用户在表单中输入信息后重新刷新了页面，在这些预加载的信息中有可能会触发错误。这时候在页面加载时运行表单验证程序，以验证已经存在的数据。这给予用户迅速处理错误的机会，而不用等到表单提交时才做出验证。
[code lang="js"]
addEvent( window, "load", function() {
// 查找页面的所有表单
var forms = document.getElementsByTagName("form");
// 遍历所有的表单
for ( var i = 0; i < forms.length; i++ ) {
// 设置load参数为true，在页面加载时验证表单
validateForm( forms[i], true );
}
});
[/code]
查看完整版本： 验证表单并显示错误信息
Tags: