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


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 相关文章推荐
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
JS定时关闭窗口的实例
May 22 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 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启动时候提示PHP startup的解决方法
2013/05/07 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
php的4种常用运行方式详解
2016/12/22 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
vue 如何使用递归组件
2020/10/23 Javascript
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Django如何配置mysql数据库
2018/05/04 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
编辑求职信样本
2013/12/16 职场文书
总经理职责
2013/12/22 职场文书
单位消防安全制度
2014/01/12 职场文书
留学推荐信怎么写
2014/01/25 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
汽车专业求职信
2014/06/05 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP