jQuery formValidator表单校验插件ver2.9.1介绍和在线演示

http://www.cnblogs.com/wzmaodong/archive/2008/04/27/1173382.html

jQuery formValidator表单校验插件ver2.9.1介绍和在线演示

jQuery formValidator表单校验插件
插件目前提示错误，有两种模式：showword和showalert,即文字提示和窗口提示
目前支持5种大的校验方式，分别是：InputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、CompareValidator（提供2个对象的比较，目前可以比较字符串和数值型）、AjaxValidator（通过ajax到服务器上做数据校验）、RegexValidator（提供可扩展的正则表达式库） 、FunctionValidator （允许用户利用外部函数进行校验）
针对jQuery formValidator表单校验插件ver2.4提供校验代码生成器，可以批量的产生校验代码

插件下载：http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html
校验代码生成器：http://www.cnblogs.com/wzmaodong/archive/2008/04/21/1164317.html

InputValidator：
值的大小（数值型和字符型）范围、值的长度、选择个数（针对checkbox、radio、select）
以上都是个区间范围，大于、小于设定值可以进行精确的提示
CompareValidator:
2个表单元素的值大小（数值型和字符型）范围
RegexValidator:
对输入值格式进行校验，可以自己写正则表达式，也可以利用扩展库的正则表达式，扩展库用户可以进行扩展
AjaxValidator:
对用户输入的值，进行服务器端校验。比如：用户是否存在
FunctionValidator:
可以用外部函数进行校验，可以当作一个处理过程，可以自定义返回错误信息。现扩展库提供部分函数供调用
插件提供函数进行校验
initConfig()：校验组的配置信息。例如提示错误模式的选择、校验成功/失败后的回调函数、是否处于调试模式等
PageIsValid()：对整个校验组进行校验
IsOneValid()：对单个表单元素进行校验
GetLength()：返回表单元素的长度，选择的个数
SetFailState()：设置错误信息
RetSetTipState()：把校验组里的表单元素的所有提示内容恢复到onshow状态

在线演示：



示例代码：
<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({onError:function(){alert("校验没有通过，具体错误请看错误提示")}});
$("#password1").formValidator({onshow:"请输入密码",onfocus:"密码不能为空",oncorrect:"密码合法"}).InputValidator({min:1,onerror:"密码不能为空,请确认"});

$("#password2").formValidator({onshow:"请输入重复密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).InputValidator({min:1,onerror:"重复密码不能为空,请确认"}).CompareValidator({desID:"password1",operateor:"=",onerror:"2次密码不一致,请确认"});

$("input:radio[name='sex']").formValidator({tipid:"sexTip",onshow:"请选择你的性别",onfocus:"没有第三种性别了，你选一个吧",oncorrect:"输入正确",defaultvalue:"2"}).InputValidator({min:1,max:1,onerror:"性别忘记选了,请确认"}).DefaultPassed();

$("#nl").formValidator({onshow:"请输入的年龄（1-99岁之间）",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了"}).InputValidator({min:1,max:99,type:"value",onerrormin:"你输入的值必须大于等于1",onerror:"年龄必须在1-99之间，请确认"}).DefaultPassed();

$("#csny").DateTimeMask({"lawlessmessage":"你输入的出生日期格式错误"}).formValidator({onshow:"请输入的出生日期",onfocus:"请输入的出生日期，不能全部是0哦",oncorrect:"你输入的日期合法"}).InputValidator({min:"1900-01-01",max:"2000-01-01",type:"value",onerror:"日期必须在\"1900-01-01\"和\"2000-01-01\"之间"}).DefaultPassed();

$("#sfzh").formValidator({onshow:"请输入15或18位的身份证",onfocus:"输入15或18位的身份证",oncorrect:"输入正确"}).FunctionValidator({fun:isCardID});

$("#email").formValidator({onshow:"请输入邮箱",onfocus:"邮箱至少6个字符,最多100个字符",oncorrect:"恭喜你,你输对了",defaultvalue:"@"}).InputValidator({min:6,max:100,onerror:"你输入的邮箱长度非法,请确认"}).RegexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你输入的邮箱格式不正确"});

$("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合",defaultvalue:"a"}).InputValidator({min:1,onerror: "你是不是忘记选择学历了!"}).DefaultPassed();

$("input:checkbox[@name='checkbox8']").formValidator({tipid:"test2Tip",onshow:"请选择你的兴趣爱好(至少选择2个,最多选择3个)",onfocus:"你至少选择2个,最多选择3个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:2,max:3,onerror:"你选的个数不对(至少选择2个,最多选择3个)"});

$("input:radio[@name='radio']").formValidator({tipid:"aiguoTip",onshow:"爱国的人一定要选哦",onfocus:"你得认真思考哦",oncorrect:"不知道你爱不爱，反正你是选了",defaultvalue:"4"}).InputValidator({min:1,max:1,onerror:"难道你不爱国？你给我选！！！！"}).DefaultPassed();

$("#shouji").formValidator({empty:true,onshow:"请输入你的手机号码，可以为空哦",onfocus:"你要是输入了，必须输入正确",oncorrect:"谢谢你的合作",onempty:"你真的不想留手机号码啊？"}).InputValidator({min:11,max:11,onerror:"手机号码必须是11位的,请确认"}).RegexValidator({regexp:"mobile",datatype:"enum",onerror:"你输入的手机号码格式不正确"});;

$("#lxdh").formValidator({empty:true,onshow:"请输入你的联系电话，可以为空哦",onfocus:"格式例如：0577-88069620",oncorrect:"谢谢你的合作",onempty:"你真的不想留联系电话了吗？"}).RegexValidator({regexp:"^[[0-9]{3}-|\[0-9]{4}-]?([0-9]{8}|[0-9]{7})?$",onerror:"你输入的联系电话格式不正确"});
});
</script>




http://www.po-soft.com/blog/slx/1327.html

javaScript前台校验jQuery.validate (2010-06-09 22:25)
标签： javaScript校验 jQuery.validate 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
0 条评论 阅读：52
上一篇： 从OECP实体结构浅谈java反射(2009-10-13)