使用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代码压缩器
Oct 12 Javascript
JS 强制设为首页的代码
Jan 31 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
关于Vue中axios的封装实例详解
Oct 20 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中防止SQL注入的最佳解决方法
2013/04/25 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
php数组分页实现方法
2016/04/30 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
java必学必会之static关键字
2015/12/03 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
jquery写出PC端轮播图实例
2018/01/26 jQuery
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Python实现简单状态框架的方法
2015/03/19 Python
Python中IPYTHON入门实例
2015/05/11 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Python中@property的理解和使用示例
2019/06/11 Python
Python实现微信小程序支付功能
2019/07/25 Python
python 实现按对象传值
2019/12/26 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
小学家长会邀请函
2014/01/23 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
简爱电影观后感
2015/06/10 职场文书
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫