使用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 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
RequireJS使用注意细节
May 15 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 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
星际争霸秘籍
2020/03/04 星际争霸
如何使用脚本模仿登陆过程
2006/11/22 PHP
php 字符转义 注意事项
2009/05/27 PHP
javascript间隔刷新的简单实例
2013/11/14 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
Python 没有main函数的原因
2020/07/10 Python
eBay奥地利站:eBay.at
2019/07/24 全球购物
出纳岗位职责模板
2013/11/27 职场文书
食堂员工工作职责
2013/12/18 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
图书馆标语
2014/06/19 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
生日寿星公答谢词
2015/09/29 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
Redis基本数据类型Set常用操作命令
2022/06/01 Redis