首先引入文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.metadata.js" type="text/javascript"></script>
文本框
class="{validate:{required:true,email:true,messages:{required:'請輸入郵件地址',email:'郵件格式不正確'}}}"
則
<script type="text/javascript">
$(document).ready(function(){$("#表單id").validate({meta:"validate"});});
</script>
錯(cuò)誤信息是一個(gè)帶class="error"的label標(biāo)簽
文本框
class="{required:true,email:true,messages:{required:'請輸入郵件地址',email:'郵件格式不正確'}}"
則
<script type="text/javascript">
$(document).ready(function(){$("#表單id").validate();});
</script>
文本框
class="{required:true,email:true,messages:{email:'郵件格式不正確'}}"
則
<script type="text/javascript">
$(document).ready(function(){$("#表單id").validate({messages:{email:{required:'請輸入郵件地址'}}});});
</script>
class="{required:true,minlength:3}"
class="required email"
class="url"
maxlength="12"
minlength="2"
min="1"
max="25"
class="{validate:{required:true,email:true}}"
class="{validate:{required:true,email:true,minlength:3,maxlength:15,equal:11,accept:true,accept:'docx?|txt|pdf',messages:{required:'',email:''},number:true,rangelength:[2,8]}}"
在指定位置顯示單條錯(cuò)誤
<div class="error"></div>
<script type="text/javascript">
$().ready(function(){$("#表單id").validate({errorLabelContainer:$("#表單id div.error")});});
</script>
顯示全部錯(cuò)誤
<div class="container">
<ol>
<li><label for="email" class="error">文字</label></li>
</ol>
</div>
首先將這個(gè)div隱藏
<script type="text/javascript">
$().ready(function(){
var container=$('div.container');
var validator=$("#表單id").validate({
errorContainer:container,
errorLabelContainer:$("ol",container),
wrapper:'li',
meta:"validate"
});
});
</script>
重置表單
$(".cancel").click(function(){validator.resetForm();});
equalTo:"#id"
validate="required:true"
validate="required:true,minlength:2,rangelength:[2,3]"
單選
<input type="radio" id="" value="m" name="gender" validate="required:true"/>
<input type="radio" id="" value="f" name="gender"/>
<label for="gender" class="error">文字</label>
id可以不同
多選[至少選兩個(gè)]
<input type="checkbox" class="checkbox" id="" value="" name="spam[]" validate="required:true,minlength:2"/>
<input type="checkbox" class="checkbox" id="" value="" name="spam[]"/>
下拉
validate="required:true,minlength:2,maxlength:2,rangelength:[2,3]" multiple="multiple"
至少選兩個(gè)
<script type="text/javascript">
$.metadata.setType("attr","validate");
$(document).ready(function(){
$("#表單id").validate();
});
</script>
<script type="text/javascript">
$().ready(function(){
$("#id").validate({
rules:{
id:"required",
id:{
required:true,
minlength:2,
equalTo:"#id"
}
},
messages:{
id:"文字",
id:{
required:"文字",
minlength:"文字",
equalTo:"文字"
}
}
});
});
</script>
聯(lián)系客服