本文的目的是验证整个表单或单个字段并动态地显示错误信息。实现表单动态验证的方法有两种。第一种方法是HTML DOM规范的组成部分，即所有的<form>元素都有一个elements的属性，这个属性是一个包含表单所有字段的数组，使用这个数组就可以遍历所有可能的字段，并检查错误。
第二种方法是为所有字段添加class属性并以此来触发验证规则。比如，有class为required的字段则触发必填项的验证。利用这两种方法就可以编写两个通用的函数，用来验证整个表单和单个字段。

// 验证表单所有字段的函数
// form参数是表单的引用
// load参数是一个布尔参数，表示验证还是是在页面加载时执行还是动态执行
function validateForm( form, load ) {
    var valid = true;

    // 遍历表单的所有字段
	// form.elements是表单所有字段的一个数组
    for ( var i = 0; i < form.elements.length; i++ ) {

        // 隐藏错误信息
        hideErrors( form.elements&#91;i&#93; );

        // 检查字段是否包含正确的内容
        if ( ! validateField( form.elements&#91;i&#93;, load ) )
            valid = false;

    }

    // 如果正确返回true，否则返回false
    return valid;
}

// 验证单个字段
function validateField( elem, load ) {
    var errors = &#91;&#93;;

    // 遍历所有的验证
    for ( var name in errMsg ) {
        // 查看字段是否是指定的错误类型
        var re = new RegExp("(^|\\s)" + name + "(\\s|$)");

        // 测试正则表达式
        if ( re.test( elem.className ) && !errMsg&#91;name&#93;.test( elem, load ) )
            // 如果没有通过验证，则把错误信息添加到列表中
            errors.push( errMsg&#91;name&#93;.msg );
    }

    // 如果存在错误信息，则显示出来
    if ( errors.length )
        showErrors( elem, errors );

    // 如果验证没有通过，则返回false
    return errors.length > 0;
}

上面的代码还缺少两个必要的函数，即隐藏和显示验证错误信息的函数。错误信息显示在每个字段后。

// 隐藏错误信息
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&#91;i&#93;;

        // 插入到DOM中
        next.appendChild( li );
    }
}
&#91;/code&#93;
实现了所有的JavaScript代码，接下来就是利用CSS来美化错误信息的显示，CSS如下：
&#91;code lang="html"&#93;
ul.errors {
    list-style: none;
    background: #FFCECE;
    padding: 3px;
    margin: 3px 0 3px 70px;
    font-size: 0.9em;
    width: 165px;
}
&#91;/code&#93;
最终效果如下图所示：
<a href="http://www.everyinch.net/wp-content/uploads/2013/12/validate.jpg"><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" /></a>
表单验证比较麻烦的一点是决定何时才是显示错误信息的合适时机。有3个不同的验证时间点：表单提交时、字段改变时和页面加载时。它们都有各自的优缺点。
1. 表单提交时验证
在表单提交时验证是最常用的技术，因为它跟普通的表单验证技术最为接近。为了监听表单的提交，必须绑定一个事件处理函数。一旦表单提交就由规则集合指定的各种规则来进行验证。如果某个字段没有通过验证，则停止表单的提交并显示相应的错误信息。

function watchForm( form ) {
    // 监听表单的提交事件
    addEvent( form, 'submit',  function(){

        // 确保表单字段通过验证
        return validateForm( form );

    });
}

// 查找页面中的第一个表单
var form = document.getElementsByTagName( "form" )[0];

// 并在它提交的时候验证它
watchForm( form );

2. 在字段改变时验证
第二种方法是监听表单内单个字段的变化。虽然可以通过监听keypres事件，来监听用户的输入。但这种做法会严重打扰用户，所以不值得推荐。另一种做法是直到用户离开字段才进行验证，这样使用户体验更为平滑。因为用户有充分的事件来完整填写所需要的信息，同时仍能较快地收到验证的错误信息。

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]

转载请注明：陈童的博客 » 验证表单并显示错误信息