使用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 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
js实现微信聊天效果
Aug 09 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 程序员应该使用的10个组件
2009/10/31 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
Python Property属性的2种用法
2015/06/21 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
设置python3为默认python的方法
2018/10/31 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
国防教育标语
2014/10/08 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
公司门卫岗位职责
2015/04/13 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
Python制作表白爱心合集
2022/01/22 Python
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers