表单验证的完整应用案例探讨


Posted in Javascript onMarch 29, 2013

表单问题,是个纠结的问题,我觉得这个是程序开发人员要去处理的东西,但是有时候程序又要前端去处理,那要看你的后台搭档怎么样了?苦逼的前端哇,不过还是自己了解一点还是比较好,你搞我也可以搞,你不搞我还可以搞,哈哈 。如果对你有用欢迎留言,共同探讨,共同进步,废话不说,贴代码(为了童鞋们方便,本代码复制即可用,无需分块拼凑):

<!doctype html> 
<html> 
<head> 
<title>表单验证的完整应用</title> 
<style type="text/css"> 
.leftside{width:100px; text-align:right;float:left;} 
label.error{color:#ea5200; margin-left:4px; padding:0px 20px; background:url(http://jt.875.cn/icon/unchecked.gif) no-repeat 2px 0 } 
label.right{margin-left:4px; padding-left:20px; background:url(http://jt.875.cn/icon/checked.gif) no-repeat 2px 0} 
</style> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.validate.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> 
</head> 
<body> 
<form id="regForm" method="get" action=""> 
<p><label class="leftside">姓名:</label><input type="text" value="" name="username" id="username" /></p> 
<p><label class="leftside">密码:</label><input type="password" value="" name="password" id="password" /></p> 
<p><label class="leftside">确认密码:</label><input type="password" value="" name="confirm_password" id="confirm_password" /></p> 
<p><label class="leftside">EMAIL:</label><input type="text" value="" name="email" id="email" /></p> 
</form> 
</body> 
</html>

效果图如下
表单验证的完整应用案例探讨
Javascript 相关文章推荐
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
$.extend 的一个小问题
Jun 18 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 #Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 #Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 #Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 #Javascript
jquery无缝向上滚动实现代码
Mar 29 #Javascript
验证码按回车不变解决方法
Mar 29 #Javascript
Jquery 自定义动画概述及示例
Mar 29 #Javascript
You might like
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
wxPython窗口的继承机制实例分析
2014/09/28 Python
python求质数的3种方法
2018/09/28 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
食堂员工工作职责
2013/12/18 职场文书
班队活动设计方案
2014/01/30 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
表彰大会策划方案
2014/05/13 职场文书
离婚协议书怎么写
2014/09/12 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL