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

187 阅读 0 评论 124 点赞

我是靠谱客的博主沉默学姐，最近开发中收集的这篇文章主要介绍表单验证的完整应用案例探讨，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

复制代码代码如下:

 
<!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> 