使用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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
Jquery常用技巧收集整理篇
2010/11/14 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
js中url对象化管理分析
2017/12/29 Javascript
vue内置指令详解
2018/04/03 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python生成IP段的方法
2015/07/07 Python
django_orm查询性能优化方法
2018/08/20 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
Pytorch的mean和std调查实例
2020/01/02 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
美国电视购物:QVC
2017/02/06 全球购物
个人找工作的自我评价
2013/10/17 职场文书
成教毕业生自我鉴定
2013/10/23 职场文书
小摄影师教学反思
2014/04/27 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
合作与交流自我评价
2015/03/09 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
小学班主任研修日志
2015/11/13 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js