经验分享:jQuery.validate 用法

                                              
validate(options)          :Validator       的FORM
valid()                           :Boolean        
rules()                           :Options         
rules(add,rules)            :Options         
rules(remove,rules)
jquery.validate是一个基于jquery的非常优秀的验证框架,我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,而且对国际化也有非常好的支持。
jquery.validate 官方网址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
使用用法:
1载jquery.js和jquery.validate.js入js(:jquery在jquery.validate.js)
<script type="text/javascript" src="jquery.js"></script>        
<script type="text/javascript" src="jquery.validate.js"></script>
2(使)
var validator = $("formId").validate({// #formId为需要进行验证的表单ID
   errorElement :"div",// 使用"div"标签标记错误, 默认:"label"
   wrapper:"li",// 使用"li"标签再把上边的errorELement包起来
   errorClass :"validate-error",// 错误提示的css类名"error"
   onsubmit:true,// 是否在提交是验证,默认:true
   onfocusout:true,// 是否在获取焦点时验证,默认:true
   onkeyup :true,// 是否在敲击键盘时验证,默认:true
   onclick:false,// 是否在鼠标点击时验证(一般验证checkbox,radiobox)
   focusCleanup:false,// 当未通过验证的元素获得焦点时,并移除错误提示
       rules: {
                    loginName: {// 需要进行验证的输入框name
                        required: true// 验证条件:必填
                    },
                    loginPassword: {// 需要进行验证的输入框name
                        required: true,// 验证条件:必填
                        minlength: 5// 验证条件:最小长度为5
                    },
                    email: {// 需要进行验证的输入框name
                        required: true,// 验证条件:必填
                        email: true// 验证条件:格式为email
                    }
                },
                messages: {
                    loginName: {
                        required: "用户名不允许为空!"// 验证未通过的消息
                    },
                    loginPassword: {
                        required: "密码不允许为空!",
                        minlength: jQuery.format("密码至少输入 {0} 字符!")
                    },
                    email: {
                        required: "email不允许为空",
                        email: "邮件地址格式错误!"
                    }
                }
2使用meta String入class(意meta String入jquery.metadata.js)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<form id="validate" action="admin/transfer!save.action" method="post">
<input type="text" class="required" name="entity.name" />
<input type="text" class="email" name="entity.email" />
<input type="submit" class="button" value="提 交" />
</form>
<script type="text/javascript">
$(document).ready(
function() {
$("#formId").validate({// #formId为需要进行验证的表单ID
   meta :"validate"// 采用meta String方式进行验证(验证内容与写入class中)
   errorElement :"div",// 使用"div"标签标记错误, 默认:"label"
   wrapper:"li",// 使用"li"标签再把上边的errorELement包起来
   errorClass :"validate-error",// 错误提示的css类名"error"
   onsubmit:true,// 是否在提交是验证,默认:true
   onfocusout:true,// 是否在获取焦点时验证,默认:true
   onkeyup :true,// 是否在敲击键盘时验证,默认:true
   onclick:false,// 是否在鼠标点击时验证(一般验证checkbox,radiobox)
   focusCleanup:false,// 当未通过验证的元素获得焦点时,并移除错误提示
});
})
</script>

在Struts2到name="entity.name"的input(即name),("")
   rules: {
                    "entity.loginName": {// 需要进行验证的输入框name
                        required: true// 验证条件:必填
                    }
                },
                messages: {
                    "entity.loginName": {
                        required: "用户名不允许为空!"// 验证未通过的消息
                    }
                }


required() :Boolean 
required(dependency-expression) :Boolean 
required(dependency-callback) :Boolean 
remote(url) :Boolean 。url
minlength(length) :Boolean 
maxlength(length) :Boolean 
rangelength(range) :Boolean [min,max]
min(value) :Boolean 
max(value) :Boolean 
email() :Boolean 
range(range) :Boolean 
url() :Boolean 证URL
date() :Boolean (似30/30/2008,)
dateISO() :Boolean 证ISO
dateDE() :Boolean (29.04.1994 or 1.1.2006
number() :Boolean 
digits() :Boolean 
creditcard() :Boolean 
accept(extension) :Boolean 
equalTo(other) :Boolean 
phoneUS() :Boolean 

validate ()
debug:: $(".selector").validate
({
   debug:true
})
: $.validator.setDefaults({
   debug:true
})
submitHandler:
,, $(".selector").validate({
   submitHandler:function(form) {
$(form).ajaxSubmit();
   }
})
ignore:
 $("#myform").validate({
   ignore:".ignore"
})
rules:
,key:value,key,value $(".selector").validate({
   rules:{
     name:"required",
     email:{
       required:true,
       email:true
     }
   }
})
messages:
息key:value式key, $(".selector").validate({
   rules:{
     name:"required",
     email:{
       required:true,
       email:true
     }
   },
   messages:{
     name:"Name不能为空",
     email:{
       required:"E-mail不能为空",
       email:"E-mail地址不正确"
     }
   }
})
groups:
,,用error Placement $("#myform").validate({
groups:{
    username:"fname lname"
},
errorPlacement:function(error,element) {
     if (element.attr("name") == "fname" || element.attr("name") == "lname")
       error.insertAfter("#lastname");
     else
       error.insertAfter(element);
   },
   debug:true
})
Onubmit Boolean :true
 $(".selector").validate({
   onsubmit:false
})
onfocusout Boolean :true 
 $(".selector").validate({
   onfocusout:false
})
onkeyup Boolean :true 
 $(".selector").validate({
   onkeyup:false
})
onclick Boolean :true
证checkbox,radiobox $(".selector").validate({
   onclick:false
})
focusInvalid Boolean :true
,() $(".selector").validate({
   focusInvalid:false
})
focusCleanup Boolean :false
, focusInvalid.使 $(".selector").validate({
   focusCleanup:true
})
errorClass String :"error"
的css, $(".selector").validate({
   errorClass:"invalid"
})
errorElement String :"label"
使 $(".selector").validate
   errorElement:"em"
})
wrapper String
使的errorELement $(".selector").validate({
   wrapper:"li"
})
errorLabelContainer Selector
 $("#myform").validate({
   errorLabelContainer:"#messageBox",
   wrapper:"li",
   submitHandler:function() { alert("Submitted!") }
})
showErrors:
, $(".selector").validate({
   showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
        this.defaultShowErrors();
   }
})
errorPlacement:
, $("#myform").validate({
rrorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})
success:
,,个css, $("#myform").validate({
        success:"valid",
        submitHandler:function() { alert("Submitted!") }
})
highlight:
,

addMethod(name,method,message)
数name
数method,(value,element,param) value,element param,用addMethod除built-in Validation methods
 ,,是a-f,:
$.validator.addMethod("af",function(value,element,params){
   if(value.length>1){
    return false;
   }
   if(value>=params[0] && value<=params[1]){
    return true;
   }else{
    return false;
   }
},"必须是一个字母,且a-f");
,的id="username",在rules
username:{
   af:["a","f"]
}
addMethod,,是af
addMethod,,:"必须是一个字母,且a-f"
addMethod,,,
,,果af:"a",么a,,[],

 

分享到:

发表评论

:wink: :twisted: :roll: :oops: :evil: :?: :-| :-P :-D :) :( :!: 8)
昵称

沙发空缺中,还不快抢~