jquery validate.js表单验证入门实例（附源码）
更新时间：2015年11月10日 10:01:37 投稿：lijiao
这篇文章主要介绍了jquery validate.js表单验证入门实例，为大家提供了jquery validate.js表单验证的源码，特别适合初学者学习validate.js表单验证，感兴趣的小伙伴们可以参考一下
小编上网查阅了许多关于jquery.validate的文章，大部门只是介绍它的api和用法，没有一个详细的的入门案例介绍，研究了半天还是无从下手。为此，小编自己做了一个jquery validate.js表单验证入门实例，写的不是特别好，但应该适用于初学者，分享给大家。
以下是validate.js表单验证入门实例参考源码，文章下面有源码下载地址：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>j2query.validate快速入门范例-代潇瑞博客</title>
<meta name="keywords" content="" />
<meta name="description" content="jquery.validate.js是一个强大的表单验证插件，这里将来个快速入门范例，展示它的快速易用性。" />
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>
<style type="text/css">
label.error{color:red;font-size:13px;}
</style>
</head>
<body>
<p>信息录入</p>
<form action="" name="infos" id="infos">
<p>用户名：<input type="text" name="username" /></p>
<p>工作号：<input type="text" name="nums" /></p>
<p>备 注：<input type="text" name="notes" /></p>
<p><input type="submit" name="sub" /></p>
</form>
<script type="text/javascript">
$(function(){
$('#infos').validate({
debug:false, //false表示验证通过后不要自动提交表单
onkeyup:false, //表示关闭按键松开时候监听验证
rules:{ //验证规则
username:{
required:true, //必填字段
rangelength:[6,10] //长度在6-10之间
},
nums:{
required:true,
digits:true
},
notes:"required"
},
messages:{ //自定义错误信息，默认为英文，除了在这里配置以为，还可以通过配置文件进行配置
username:{
required:"用户名必填",
rangelength:"用户名长度必须为6-10位"
},
nums:{
required:"工作号必填",
digits:"工作号必须为数字"
},
notes:"备注必填"
},
//验证通过可以在这里做你想做的事情
submitHandler:function(form){
alert("验证通过");
}
});
});
</script>
</body>
</html>
源码下载：jquery validate.js表单验证入门实例
演示地址：jquery validate.js表单验证入门实例
以上就是为大家提供的一个简单的jquery validate.js表单验证入门实例，欢迎大家共同学习，希望对大家的学习有所帮助。
相关文章
这篇文章主要介绍了jquery中使用.each()遍历元素学习笔记,本文从实际项目经验总结而来,需要的朋友可以参考下2014-11-11
jQuery方法简洁实现隔行换色及toggleClass的使用
隔行换色的展示效果想必大家早已熟悉了吧，今天在帮大家回忆一下本例中主要用到的方法是toggleClass()，感兴趣的你可不要错过了哈，希望可以帮助到你2013-03-03
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
在本篇文章里小编给大家整理了关于解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法，有需要的朋友们可以学习下。2019-08-08
分享一款基于jQuery在线问卷答题系统代码是一款实用的jQuery答题插件，点击下一题切换带有淡入淡出效果。2015-04-04
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
这篇文章主要介绍了jQuery动画显示和隐藏效果实现方法,并附带了demo源码供读者下载参考,涉及jQuery操作图片的显示,隐藏及淡入淡出等效果,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了jQuery实现文本框输入同步的方法,涉及jQuery元素属性操作的相关技巧,需要的朋友可以参考下2015-06-06
jqGrid可以绑定XML,JSON和数组三种类型的数据。接下来通过本文给大家介绍jqGrid用法的相关知识，感兴趣的朋友一起学习吧2016-06-06
存储过程是在大型数据库系统中，一组为了完成特定功能的sql语句集，经过编译存储在数据库中，用户通过指定存储过程的名字并给出参数（如果该存储过程带有参数）来执行它，下面小编给大家介绍asp.net中oracle存储过程，需要的朋友可以参考下2015-08-08
应该大家都知晓lightbox这类灯箱效果了，它一般更多地被运用在网站照片的显示上。当然还有更推广的应用，如facebox这种更漂亮全面的效果。2009-06-06
在鼠标经过的时候不停的显示隐藏html元素，正确的写法应该是下面这样的,需要的朋友可以参考下2014-03-03
最新评论