jquery validate ajax 怎么使用
- remote: {
- url: "ajax/validateUserName.action", //后台处理程序
- type: "post", //数据发送方式
- dataType: "json", //接受数据格式
- data: { //要传递的数据，默认已传递应用此规则的表单项
- email: function() {
- return $("#email").val();
- }
- }
remote: {
url: "ajax/validateUserName.action", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据，默认已传递应用此规则的表单项
email: function() {
return $("#email").val();
}
}注意：remote是远程验证：比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。
除了内置的验证规则，validation还允许自定义验证规则。这是通过validation的addMethod方法实现的，语法为：jQuery.validator.addMethod("name",function,message)。其中name为验证规则的名称，function定义验证的规则，message是验证失败时的提示信息。jqueryvalide例子：
$.validator.setDefaults({
submitHandler:function(){alert("submitted!");}
});$().ready(function() {
//validatethecommentformwhenitissubmitted
$("#commentForm").validate();
//validatesignupformonkeyupandsubmit
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:{
required:true,
minlength:2
},
password:{
required:true,
minlength:5
},
confirm_password:{
required:true,
minlength:5,
equalTo:"#password"
},
email:{
required:true,
email:true
},
topic:{
required:"#newsletter:checked",
minlength:2
},
agree:"required"
},
messages:{
firstname:"Pleaseenteryourfirstname",
lastname:"Pleaseenteryourlastname",
username:{
required:"Pleaseenterausername",
minlength:"Yourusernamemustconsistofatleast2characters"
},
password:{
required:"Pleaseprovideapassword",
minlength:"Yourpasswordmustbeatleast5characterslong"
},
confirm_password:{
required:"Pleaseprovideapassword",
minlength:"Yourpasswordmustbeatleast5characterslong",
equalTo:"Pleaseenterthesamepasswordasabove"
},
email:"Pleaseenteravalidemailaddress",
agree:"Pleaseacceptourpolicy"
}
});
//proposeusernamebycombiningfirst-andlastname
$("#username").focus(function(){
varfirstname=$("#firstname").val();
varlastname=$("#lastname").val();
if(firstname&&lastname&&!this.value){
this.value=firstname+"."+lastname;
}
});
//codetohidetopicselection,disablefordemo
varnewsletter=$("#newsletter");
//newslettertopicsareoptional,hideatfirst
varinital=newsletter.is(":checked");
vartopics=$("#newsletter_topics")[inital?"removeClass":"addClass"]("gray");
vartopicInputs=topics.find("input").attr("disabled",!inital);
//showwhennewsletterischecked
newsletter.click(function(){
topics[this.checked?"removeClass":"addClass"]("gray");
topicInputs.attr("disabled",!this.checked);
});
});
</script><style type="text/css">
#commentForm{width:500px;}
#commentFormlabel{width:250px;}
#commentFormlabel.error,#commentForminput.submit{margin-left:253px;}
#signupForm{width:670px;}
#signupFormlabel.error{
margin-left:10px;
width:auto;
display:inline;
}
#newsletter_topicslabel.error{
display:none;
margin-left:103px;
}
</style></head><body>
<h1 id="banner"><a href="<p>Default submitHandler is set to display an alert into of submitting the form</p>
<form class="cmxform" id="commentForm" method="get" action="">
<legend>Pleaseprovideyourname,emailaddress(won'tbepublished)andacomment</legend>
<labelfor="cname">Name(required,atleast2characters)</label>
<inputid="cname"name="name"class="required"minlength="2"/>
<labelfor="cemail">E-Mail(required)</label>
<inputid="cemail"name="email"class="requiredemail"/>
<labelfor="curl">URL(optional)</label>
<inputid="curl"name="url"class="url"value=""/>
<labelfor="ccomment">Yourcomment(required)</label>
<textareaid="ccomment"name="comment"class="required"></textarea>
<inputclass="submit"type="submit"value="Submit"/>
</form><form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validatingacompleteform</legend>
<p>
<labelfor="firstname">Firstname</label>
<inputid="firstname"name="firstname"/>
</p>
<p>
<labelfor="lastname">Lastname</label>
<inputid="lastname"name="lastname"/>
</p>
<p>
<labelfor="username">Username</label>
<inputid="username"name="username"/>
</p>
<p>
<labelfor="password">Password</label>
<inputid="password"name="password"type="password"/>
</p>
<p>
<labelfor="confirm_password">Confirmpassword</label>
<inputid="confirm_password"name="confirm_password"type="password"/>
</p>
<p>
<labelfor="email">Email</label>
<inputid="email"name="email"/>
</p>
<p>
<labelfor="agree">Pleaseagreetoourpolicy</label>
<inputtype="checkbox"class="checkbox"id="agree"name="agree"/>
</p>
<p>
<labelfor="newsletter">I'dliketoreceivethenewsletter</label>
<inputtype="checkbox"class="checkbox"id="newsletter"name="newsletter"/>
</p>
<fieldsetid="newsletter_topics">
<legend>Topics(selectatleasttwo)-note:wouldbehiddenwhennewsletterisn'tselected,butisvisiblehereforthedemo</legend>
<labelfor="topic_marketflash">
<inputtype="checkbox"id="topic_marketflash"value="marketflash"name="topic"/>
Marketflash
</label>
<labelfor="topic_fuzz">
<inputtype="checkbox"id="topic_fuzz"value="fuzz"name="topic"/>
Latestfuzz
</label>
<labelfor="topic_digester">
<inputtype="checkbox"id="topic_digester"value="digester"name="topic"/>
Mailinglistdigester
</label>
<labelfor="topic"class="error">Pleaseselectatleasttwotopicsyou'dliketoreceive.</label>
</fieldset>
<p>
<inputclass="submit"type="submit"value="Submit"/>
</p>
</fieldset>
</form><h3>Syntetic examples</h3>
<ul>
<li><ahref="errorcontainer-demo.html">Errormessagecontainersinaction</a></li>
<li><ahref="custom-messages-metadata-demo.html">CustomMessagesasMetadata</a></li>
<li><ahref="radio-checkbox-select-demo.html">Radioandcheckboxbuttonsandselects</a></li>
<li><ahref="ajaxSubmit-intergration-demo.html">IntegrationwithFormPlugin(AJAXsubmit)</a></li>
<li><ahref="custom-methods-demo.html">Custommethodsandmessagedisplay.</a></li>
<li><ahref="dynamic-totals.html">Dynamicforms</a></li>
<li><ahref="themerollered.html">FormsstyledwithjQueryUIThemeroller</a></li>
</ul>
<h3>Real-worldexamples</h3>
<ul>
<li><ahref="milk/">RememberTheMilksignupform</a></li>
<li><ahref="marketo/">Marketosignupform</a></li>
<li><ahref="multipart/">BuyandSellaHousemultipartform</a></li>
<li><ahref="captcha/">Remotecaptchavalidation</a></li>
</ul><h3>Testsuite</h3>
<ul>
<li><ahref="../test/">ValidationTestsuite</a></li>
</ul>
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo