使用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 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Vue中对iframe实现keep alive无刷新的方法
Jul 23 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
PHP5常用函数列表(分享)
2013/06/07 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
php实现微信支付之现金红包
2018/05/30 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
超清晰的document对象详解
2007/02/27 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python实现的端口扫描功能示例
2018/04/08 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
详解Python 最短匹配模式
2020/07/29 Python
python代码实现猜拳小游戏
2020/11/30 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
龙门石窟导游词
2015/02/02 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers