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 相关文章推荐
javascript学习笔记(五)正则表达式
Apr 08 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
详解JavaScript中的this指向问题
Feb 05 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
附件名前加网站名
2008/03/23 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
Smarty3配置及入门语法
2017/02/22 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python搜索指定目录的方法
2015/04/29 Python
Python3使用requests发闪存的方法
2016/05/11 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
python 绘制国旗的示例
2020/09/27 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
单位承诺书格式
2014/05/21 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
校园广播稿100字
2014/10/06 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL