Jquery Validate结合QTip实现绚丽的表单验证

相信做过前端开发的童鞋，一定都涉及到表单验证的模块设计，也定都会对Alert的粗暴提示厌恶至极。当然，我也不例外。一直期待着，一种比较优雅提示效果。

看到这，大家可能觉得Jquery Validate不是可以解决这个问题吗？不知，大家会不会觉得Jquery Validate的提示信息会占用相当的页面区域。在这个信息爆炸的时代，未免有些暴殄天物了，而且很难跟当前的页面效果融合到一起，很大程度影响的前端美观，降低了用户体验效果。直到前不久，为给一个Input框增加Title提示信息而认识了QTip2，感觉这个QTip的确是个强大的UI插件，仅短短的几句JS代码，就给Input框增添了美观的输入提示信息，不需要另外添加CSS，当然引入那是得必然的，而且还可以是一个对话框的样式，自然异常欣喜。

转念一想，要是它能够跟Jquery Validate插件结合起来那将是一件相当爽的事情了。于是乎，就研究了一番。

首先，简单先介绍一下Jquery Validate和QTip2吧。

 

需要引用的JS库:  

<script src="js/jquery.js" type="text/javascript"></script>  
<script src="js/jquery.validate.js" type="text/javascript"></script>  
<script src="js/jquery.metadata.js" type="text/javascript"></script>  

需要验证的表单:

<form id="signupForm" method="get" action="">  
<label for="firstname">Firstname</label>  
    <input id="firstname" name="firstname" class="required" />  
<label for="email">E-Mail</label>  
    <input id="email" name="email" class="email required" />  
<label for="password">Password</label>  
    <input id="password" name="password" type="password" class="{required:true,minlength:5}" />  
<label for="confirm_password">确认密码</label>  
    <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />  
<input class="submit" type="submit" value="Submit"/>  
</form>  

验证JS  

方式一、直接加在Class里面 

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"  

在使用equalTo关键字时, 后面的内容必须加上引号, 如下代码:  

class="{required:true,minlength:5,equalTo:'#password'}" 

 方式二、使用关键字: meta(为了元数据使用其他插件你要包装 你的验证规则在他们自己的项目中可以用这个特殊的选项). 

meta: "validate"  
<input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />

 方式三、使用meta关键字, 但class="{required:true,minlength:5}"将不起作用.  

$.metadata.setType("attr", "validate"); 

 

 这样可以使用validate="{required:true}"的方式，或者class="required". 

校验规则: (根据当前的语言版本引入对应的message资源文件, 可以实现提示信息的国际化)

$(document).ready(function() {  
    $("#signupForm").validate({  
        rules: {  
            firstname: "required",  
            email: {  
                required: true,    
                email: true  
            },  
            password: {    
                required: true,    
                minlength: 5  
            },  
            confirm_password: {    
                required: true,    
                minlength: 5,    
                equalTo: "#password"  
            }  
        },    
        messages: {  
            firstname: "请输入姓名",  
            email: {    
                required: "请输入Email地址",    
                email: "请输入正确的email地址"  
            },  
            password: {    
                required: "请输入密码",    
                minlength: jQuery.format("密码不能小于{0}个字符")  
            },  
            confirm_password: {    
                required: "请输入确认密码",    
                minlength: "确认密码不能小于5个字符",    
                equalTo: "两次输入密码不一致不一致"  
            }  
        }   
    });  
});  
//messages处，如果某个控件没有message，将调用默认的信息  

这样，就实现了一个简单的表单的验证的JS。
对于，QTip可仅仅使用其的提示Tip功能即可。

引入的库, 当然这个必须在Jquery之前引入，毕竟是在其基础之上:

<script type="text/javascript" src="js/jquery.qtip.min.js"></script>  
<link rel="stylesheet" type="text/css" href="css/jquery.qtip.min.css" />  
  
$(document).ready(function()  
{  
    // Match all <A/> links with a title tag and use it as the content (default).  
    $('a[title]').qtip();  
});  
//如上, 的简单一句，就可以让A标签中Title信息, 以对话框的形式显示出来 

QTip2频率较高的参数设置, 一般如下:  
$.fn.qtip.defaults = {  
   content: {  
      text: true,   
      attr: 'title',   
      ajax: false,  
      title: {  
         text: false,   
         button: false  
      }  
   },  
   position: {  
      my: 'top left',   
      at: 'bottom right',  
   },  
   show: {  
      event: 'mouseenter',  
      solo: false,  
      ready: false,  
      modal: false  
   },  
   hide: {  
      event: 'mouseleave'  
   },  
   style: 'ui-tooltip-default'  
};  
  
//当然，具体的还得是官方的API:  
http://craigsworks.com/projects/qtip2/docs/

这下，万事具备，需要是吧他们有机地结合起来！

引入JS库和CSS:  

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>  
<script type="text/javascript" src="js/jquery-migrate-1.0.0.js"></script>  
<script type="text/javascript" src="js/jquery.qtip.min.js"></script>  
<script type="text/javascript" src="js/jquery.validate.js"></script>  
  
<link rel="stylesheet" type="text/css" href="css/jquery.qtip.min.css" />  
  
需要验证的Form:  
<form id="MyForm" autocomplete="off" method="post">  
    <input id="Field1" name="firstName1" type="text" class="testClass1" value="" tabindex="4" maxlength="20" /><br />  
    <input id="Field2" name="firstName2" type="text" class="testClass2" value="" tabindex="4" maxlength="20" /><br />     
    <input id="Field3" name="firstName3" type="text" class="testClass3" value="" tabindex="4" maxlength="20" /><br />  
    <br /><br />  
    <input class="submit" type="button" id="submitClick" value="Submit order" />  
</form>  
  
核心的JS处理:  
<script type="text/javascript" class="example">  
$(document).ready(function(){  
    $.validator.addMethod("cRequired", $.validator.methods.required, "Input name is required");    
    $.validator.addMethod("cMinlength",   
        function(value, element, params){  
            if(value!=null && value!=""){  
                if(value.length<params){  
                    return false;  
                }  
                return true;  
            }else{            
                $(element).qtip('destroy');  
                return true;  
            }  
        }, $.format("Please input at least {0} characters!"));    
    $.validator.addClassRules("testClass1", {cRequired:true, cMinlength:6});  
    $.validator.addClassRules("testClass2", {cRequired:true});  
    $.validator.addClassRules("testClass3", {cMinlength:6});  
    $("#MyForm").validate({  
        errorClass: "errormessage",  
        onkeyup: false,  
        errorClass: 'error',  
        validClass: 'valid',  
        errorPlacement: function(error, element)  
        {  
            var elem = $(element),  
                corners = ['left center', 'right center'],  
                flipIt = elem.parents('span.right').length > 0;  
  
            // Check we have a valid error message  
            if(!error.is(':empty')) {  
                // Apply the tooltip only if it isn't valid  
                elem.first().qtip({  
                    overwrite: false,  
                    content: error,  
                    position: {  
                        my: corners[ flipIt ? 0 : 1 ],  
                        at: corners[ flipIt ? 1 : 0 ],  
                        viewport: $(window)  
                    },  
                    show: {  
                        event: false,  
                        ready: true  
                    },  
                    hide: false,  
                    style: {  
                        classes: 'qtip-red' // Make it red  
                    }  
                })  
  
                // If we have a tooltip on this element already, just update its content  
                .qtip('option', 'content.text', error);  
            }  
  
            // If the error is empty, remove the qTip  
            else { elem.qtip('destroy'); }  
        },  
        success: $.noop,  
        submitHandler:  function(form){  
            alert("helloWork");  
            alert($(form).html());//Jusr A Form  
            form.submit();  
        }  
    });  
      
    //Click Event  
    $("#submitClick").click(function(){  
        $("#MyForm").valid();  
        $("#submitClick").die("click");  
        return false;  
    });  
});  
</script>  
  
// elem.qtip('destroy');这句代码相当的有效, 如果你调用多个JS的验证,   
//可能会发生提示信息重叠的情况, 使用此句可阻断JS的继续验证.

当然, 对应页面元素需要过多重复的情况可使用如下的方式: 

//Jquery Validate  
$.validator.addMethod("cRequired", $.validator.methods.required, $.validator.messages.required);   
$.validator.addMethod("cMinlength", $.validator.methods.minlength, $.validator.messages.minlength);     
$.validator.addMethod("cRangelength",   
    function(value, element, params){   
        value=$.trim(value);  
        if(!isEmpty(value)){  
            if(value.length<params[0] || value.length>params[1]){  
                return false;     
            }  
            return true;  
        }else{  
            $(element).qtip('destroy');  
            return true;  
        }  
    }, $.validator.messages.rangelength);    
$.validator.addClassRules("cRequired", {cRequired: true});  
$.validator.addClassRules("cMinlength", {cMinlength: 2});  
$.validator.addClassRules("cRangelength", {cRangelength: [5,30]});  
  
//这样, 只需在对应的表单Input的Class里面, 添加对应的rules即可.   
//如: cRequired , cMinlength , cRangelength 并且多个验证可叠加.   
//相当方便了吧.  

至此，一个比较优雅的表单验证，就此实现了！上图，看一下效果 ：

 

本文转自：http://ld-21.iteye.com/blog/1846513

 欢迎大家 加入QQ交流群 ：15129679 学习交流。