使用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判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 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
写一个用户在线显示的程序
2006/10/09 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
浅谈Fetch 数据交互方式
2018/12/20 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
numpy matrix和array的乘和加实例
2018/06/28 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
python跨文件使用全局变量的实现
2020/11/17 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
应届电子商务毕业自荐书范文
2014/02/11 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
监察建议书
2015/02/04 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL