使用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 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
JS实现简单日历特效
Jan 03 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
多个表单中如何获得这个文件上传的网址实现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 Socket写的POP3类
2013/10/30 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
vue 点击按钮增加一行的方法
2018/09/07 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
为什么会有内存对齐
2016/10/10 面试题
12月小学生校园广播稿
2014/02/04 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
交通事故委托书范本
2014/09/28 职场文书
影视后期实训报告
2014/11/05 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
python 详解turtle画爱心代码
2022/02/15 Python
Python语言内置数据类型
2022/02/24 Python