jquery validate.js表单验证入门实例(附源码)


Posted in Javascript onNovember 10, 2015

小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手。为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家。

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表单验证入门实例,欢迎大家共同学习,希望对大家的学习有所帮助。

Javascript 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
纯javascript响应式树形菜单效果
Nov 10 #Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 #Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 #Javascript
3种js实现string的substring方法
Nov 09 #Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 #Javascript
js中substring和substr两者区别和使用方法
Nov 09 #Javascript
浅析js中substring和substr的方法
Nov 09 #Javascript
You might like
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
PHP中header用法小结
2016/05/23 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
Python中的集合介绍
2019/01/28 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Python API len函数操作过程解析
2020/03/05 Python
Django websocket原理及功能实现代码
2020/11/14 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
业务部经理岗位职责
2014/01/04 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
法学函授自我鉴定
2014/02/06 职场文书
2014植树节活动总结
2014/03/11 职场文书
神龙架导游词
2015/02/11 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸