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


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 相关文章推荐
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
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
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
php curl_init函数用法
2014/01/31 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
python中查看变量内存地址的方法
2015/05/05 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
Java面试笔试题大全
2016/11/23 面试题
文秘专业应届生求职信
2014/05/26 职场文书
赔偿协议书范本
2014/09/12 职场文书
2014年个人售房协议书
2014/10/30 职场文书
导游词格式
2015/02/13 职场文书
施工员岗位职责范本
2015/04/11 职场文书
优质护理服务心得体会
2016/01/22 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
Python 多线程处理任务实例
2021/11/07 Python