使用jQuery validate 验证注册表单实例演示


Posted in Javascript onMarch 25, 2013

Validation是jQuery的插件,提供的方法可以大大简化验证表单的工作,功能也足够一般的需要了。rules也足够简单,很容易上手,举个简单的例子,用validation来验证注册表单。

首先确定验证的目标是:
1. 必填项不能为空
2. 注册用户名必须为6-12个字符内
3. 合格的email格式
4. 密码必须为6-18个字符
5. 确认密码必须跟密码一致

ok,目标很明确了。正片开始

<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="../lib/jquery.validate.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$( "#regForm" ).validate({ 
rules: { 
// 注册用户名 
username: { 
required: true, 
minlength: 5, 
maxlength: 12 
}, 
// email 
email: { 
required: true, 
email: true 
}, 
// 密码 
password: { 
required: true, 
minlength: 6, 
maxlength: 18 
}, 
// 确认密码 
confirm_password: { 
equalTo:"#password" 
}, 
// 检验验证码 
captcha: { 
required: true, 
remote: "checkCaptcha.php" 
} 
}, 
messages: { 
// 注册用户名 
username: { 
required: "此项不能为空", 
minlength: "不能少于5个字符", 
maxlength: "不能多于12个字符" 
}, 
// email 
email: { 
required: "此项不能为空", 
email: "email格式不正确" 
}, 
// 密码 
password: { 
required: "此项不能为空", 
minlength: "不能少于6个字符", 
maxlength: "不能多于18个字符" 
}, 
// 确认密码 
confirm_password: "两次输入密码不一致", 
// 检验验证码 
captcha: { 
required: "请输入验证码", 
remote: "验证码输入错误" 
} 
} 
}); 
}); 
</script>

运行后,得到下面的结果
使用jQuery validate 验证注册表单实例演示

更多用法参考 https://3water.com/article/24405.htm

Javascript 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
javascript实现的简单计时器
Jul 19 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
详解Vue路由自动注入实践
Apr 17 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 #Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 #Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 #Javascript
js 字符串转换成数字的三种方法
Mar 23 #Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 #Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 #Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 #Javascript
You might like
网友原创的PHP模板类代码
2008/09/07 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
php intval函数用法总结
2019/04/14 PHP
密码强度检测效果实现原理与代码
2013/01/04 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python实现的计算器功能示例
2018/04/26 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
Python二元算术运算常用方法解析
2020/09/15 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
电大自我鉴定范文
2013/10/01 职场文书
大型晚会策划方案
2014/02/06 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
基于Go语言构建RESTful API服务
2021/07/25 Golang
Apache POI的基本使用详解
2021/11/07 Servers