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类的定义
Jun 28 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
django中模板的html自动转意方法
2018/05/27 Python
Django 视图层(view)的使用
2018/11/09 Python
Python3 修改默认环境的方法
2019/02/16 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
UDP协议功能
2013/01/06 面试题
库房主管岗位职责
2013/12/31 职场文书
师生聚会感言
2014/01/26 职场文书
电子专业自荐信
2014/07/01 职场文书
小学运动会演讲稿
2014/08/25 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
小学教育见习报告
2014/10/31 职场文书
初一语文教学反思
2016/03/03 职场文书