javaScript前台校验jQuery.validate

做网页表单经常要用到数据校验的功能.JavaScript校验是一种比较常用的手段。最近写页面写得比较多，发现了一个比较好用的js校验框架--jQuery.validate。她是一款基于jquery的校验工具，基本可以满足我们大多数的页面校验需要，且支持ajax校验。支持各种自定义的扩展，包括自定义校验规则，自定义错误显示的方式等。

        通过一段时间的使用，感觉用起来还是非常简单的。这里做一下使用方法的简单介绍，而后会介绍一个我自己扩展的一种错误提示方式（感觉默认的信息提示的方式比较一般实在不怎么好看）。
        闲话少说，先说下用法：
        先导入必要的两个js文件

XML/HTML代码

<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.validate.js"></script>

    另外还有一段css，用来突出显示出错的表单控件和错误信息的显示样式:

CSS代码

input.error { border: 1px dotted red; }
label.error {
    color: red;display: none;
}

         label.error 的display: none是为了让我们可以在页面上任意位置放置显示错误的label以及上面的内容，并在没有进行校验时不显示出来。
        需要的东西都齐了，我们可以为我们的表单元素添加校验了。添加校验的方法总的说有两种：一种写在控件的标签上；另一种写在js脚本中。并且两种方法可混合使用。
        第一种写在标签中的如下：

XML/HTML代码

<input type="text" class="required number" max="10" name="t1">

         class="required number" 表示必须字段且为数值型，max="10" 表示最大值为10。
        另一种使用JavaScript脚本的写法如下:

 

XML/HTML代码

<script type="text/javascript">
$('#test_form').validate({
rules:{
 t2 : {required:true,number:true}
},
messages:{t2:{required :"这个字段你必须填~~！",number:"这个字段真可以是数字"}}
});
</script>

         其中test_form是表单form的id，t2是需要校验的控件的名字。rules后面的json描述的是校验规则，messages是自定义的错误信息。顺便说一句，有时候我们form中控件的name中是带“.”的，比如：user.name,这时候用js脚本定义校验规则时，需要加上引号：”user.name”。
        这两种写法各有利弊，直接写在控件标签上的比较简单直观，相对来说js的写法过于复杂，可灵活性更强。而且有时候我们可能没机会在控件的标签上写规则，假如我们用了标签库，如struts标签库，有些标签我们写上max=“10”这样的东西，标签库将无法解析直接报错。总之，这两种写法jQuery.validate都认识，我们在合适的场景选择合适的方式就可以了。
        另外，如果你想把规则写在控件的标签上，仅仅写上规则是不行的，还需要在页面加载完的时候调用一下$('#test_form').validate();为form添加校验，这样在你点提交按钮的时候就会自动校验了。
        说了这么多，该上个图了，看看校验的效果：

 

        成功了，校验的效果有了，表单也不会被提交。可能有的同学要说了，“要不要这么难看啊？”。这正是我下面要解决的问题。
        我们来自定义一个错误显示的方式，效果如下：

         错误控件突出显示的方式没有改，为了兼容有些浏览器有些控件比如火狐中单选按钮没法标注红框的问题，在每个错误的控件后面放了一个红色的小叉号，另外当鼠标移动到错误控件或者小叉号上时显示错误的信息。
        实现这个效果的主要js代码如下：

JavaScript代码

function showErrors(){
        var t = this;
        for ( var i = 0; this.errorList[i]; i++ ) {
            var error = this.errorList[i];
            this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );

            var elename = this.idOrName(error.element);
            // 错误信息div
            var errdiv = $('div[htmlfor='+ elename + ']');
            var errimg = $('img[htmlfor='+ elename + ']');
            if(errdiv.length == 0){ // 没有div则创建

                // 纯css不用图片的圆角div，存在在IE6下显示过长的问题
//              errdiv = $('<div>'
//              +   '<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>'
//              +   '<span class="errmsg"> </span>'
//              +   '<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> '
//              +   '</div> ');

                // 带图片的圆角div在所有浏览器兼容
                errdiv = $('<div>'
                        + '<img src="img/left_icon.gif" width="6" height="24" align="absmiddle" class="fl" />'
                        + '<div class="errmsgdiv fl errmsg"></div>'
                        + '<img src="img/right_icon.gif" width="6" height="24" align="absmiddle" class="fl" />'
                        + '</div>');


                errdiv.attr({"for":  this.idOrName(error.element), generated: true})
                .addClass(this.settings.errorClass);
//              errdiv.css({left : $.getLeft(error.element) + 'px',top : $.getTop(error.element) + 'px'}); // 显示在控件的下面
                errdiv.appendTo($('body'));
            }
            if(errimg.length == 0){ // 没有img则创建
                errimg = $('<img alt="错误" src="img/unchecked.gif">')
                errimg.attr({"for":  this.idOrName(error.element), generated: true});
                errimg.insertAfter(error.element);
            }
            errimg.show();
            errdiv.find(".errmsg").html(error.message || "");
            // 鼠标放到图片显示错误
            $(errimg).hover(function(e){
                $('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 显示在鼠标位置偏移20的位置
                $('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeIn(200);
            },
            function(){
                $('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeOut(200);
            });
            // 鼠标放到控件上显示错误
            $(error.element).hover(function(e){
                $('div[htmlfor="'+ t.idOrName(this) + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 显示在鼠标位置偏移20的位置
                $('div[htmlfor="'+ t.idOrName(this) + '"]').fadeIn(200);
            },
            function(){
                $('div[htmlfor="'+ t.idOrName(this) + '"]').fadeOut(200);
            });
        }

        // 校验成功的去掉错误提示
        for ( var i = 0; this.successList[i]; i++ ) {
                $('div[htmlfor="'+ this.idOrName(this.successList[i]) + '"]').remove();
                $('img[htmlfor='+ this.idOrName(this.successList[i]) + ']').hide();
        }

        // 自定义高亮
        if (this.settings.unhighlight) {
            for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
                this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
            }
        }
    }
$.extend({
        getLeft : function(object) {
            var go = object;
            var oParent, oLeft = go.offsetLeft;
            while (go.offsetParent != null) {
                oParent = go.offsetParent;
                oLeft += oParent.offsetLeft;
                go = oParent;
            }
            return oLeft;
        },
        getTop : function(object) {
            var go = object;
            var goHeight = go.height;
            var oParent, oTop = go.offsetTop;
            while (go.offsetParent != null) {
                oParent = go.offsetParent;
                oTop += oParent.offsetTop;
                go = oParent;
            }
            return oTop + 22;// 之所以加22不加控件高度,为了兼容ie6.
        }
});
// 本地语言
jQuery.extend(jQuery.validator.messages, {
        required: "必选字段",
        remote: "请修正该字段",
        email: "请输入正确格式的电子邮件",
        url: "请输入合法的网址",
        date: "请输入合法的日期",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入合法的数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符串",
        maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
        minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
        rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
        range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
        min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});

         自定义一个showErrors的方法，然后在为表单添加校验时，指定使用这个方法显示错误信息。

JavaScript代码

$('#test_form').validate({
rules:{
 t2 : {required:true,number:true}
},
messages:{t2:{required :"这个字段你必须填~~！",number:"这个字段真的可以是数字"}},
showErrors: showErrors  //使用自定义的错误显示方法
});

        这样子我们想要的效果就实现了，是不是感觉比原来的样子好多了呢？
        jQuery.validate是一个非常灵活的JavaScript校验框架，上面只是介绍了一下基本的用法和自定义了一个错误显示的样式。一般的表单校验基本可以搞定了，不过一些比较特殊，比如身份证号的校验，页面上FCK编辑器的校验，还是需要我们自己来扩展的。个人感觉这是个很不错的js校验框架，所以介绍给大家，希望有所帮助。

 

附件：

javaScript前台校验jQuery.validate

validate扩展错误提示

官方jquery.validate

javaScript前台校验jQuery.validate

 

 

相关文章推荐：

 

• 企业应用下的业务组件开发
• 基于面向服务体系架构（SOA）和面向资源体系架构（ROA）的业务组件模型
• 什么是业务组件？如何划分业务组件？
• 企业应用下的业务组件开发
• 面向服务的体系架构（SOA）和业务组件（BC）的思考
• 关于组件化系统如何实现的一点想法