jQuery.Validate表单验证插件的使用示例详解
jQueryValidate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。
请在这里查看示例validate示例
示例包含
- 验证错误时，显示红色错误提示
- 自定义验证规则
- 引入中文错误提示
- 重置表单需要执行2句话
源码示例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
<title>demo</title>
<scriptsrc="../js/jquery-1.11.3.min.js"></script>
<scriptsrc="js/jquery.validate.min.js"></script>
<scriptsrc="js/messages_zh.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
body,html{
width:100%;
height:100%;
}
.red{
color:red;
}
.green{
color:green;
}
</style>
</head>
<body>
<formid="form">
<div>
<inputtype="text"name="a"/>
</div>
<div>
<inputtype="submit"value="提交">
<inputclass="reset"type="button"value="重置">
</div>
</form>
</body>
<script>
$(function(){
varvalidator=$('#form').validate({
submitHandler:function(form){
$('body').append('表单验证成功，发送了一个请求');
},
rules:{
a:{
required:true,
isEven:true,//使用自定义的验证规则
},
},
messages:{
a:{
required:'<div><spanclass="red">*</span><span>此项必填</span></div>',
isEven:'<div><spanclass="red">*</span><span>不是偶数</span></div>',
},
},
//验证成功后的回调
success:function(label){
label.html('<div><spanclass="green">*</span><span>通过验证</span></div>');
}
});
//自定义验证
jQuery.validator.addMethod('isEven',function(value,element){
returnthis.optional(element)||!(value%2);
},'请输入一个偶数');
//重置表单
$(".reset").click(function(){
validator.resetForm();//插件方法-删除错误提示
$('#form')[0].reset();//原生方法-清空输入内容
});
});
</script>
</html>
相关阅读：
jQueryValidate插件自定义验证规则的方法
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
JQueryvalidate插件Remote用法大全
jQueryeasyui的validatebox校验规则扩展及easyui校验框validatebox用法
以上所述是小编给大家介绍的jQuery.Validate表单验证插件的使用示例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！