当前位置:编程学习 > html/css >>

表单验证的完整应用

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


[html] 
<!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(/2013/0329/20130329030938719.gif) no-repeat 2px 0 } 
label.right{margin-left:4px; padding-left:20px; background:url(/2013/0329/20130329030938664.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>&nbs

补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,