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 相关文章推荐
js 动态文字滚动的例子
Jan 17 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
js实现网页随机验证码
Oct 19 Javascript
15个值得收藏的JavaScript函数
Sep 15 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 Try Catch异常测试
2009/03/01 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
php网页病毒清除类
2014/12/08 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
js 函数性能比较方法
2020/08/24 Javascript
Python中的迭代器漫谈
2015/02/03 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
详解python中*号的用法
2019/10/21 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
假日旅行社实习自我鉴定
2013/09/24 职场文书
营销与策划应届生求职信
2013/11/04 职场文书
领导干部培训感言
2014/01/23 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
诚信考试倡议书
2014/04/15 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
社区低保工作总结2015
2015/07/23 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL