使用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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
js常见表单应用技巧
Jan 09 Javascript
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
多个表单中如何获得这个文件上传的网址实现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程序的方法
2009/03/09 PHP
优化PHP程序的方法小结
2012/02/23 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
浅析javascript 定时器
2014/12/23 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python画图学习入门教程
2016/07/01 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
超市开店计划书
2014/04/26 职场文书
大学生赌博检讨书
2014/09/22 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书