读书人

jquery求指教!

发布时间: 2012-09-01 09:33:02 作者: rapoo

jquery高手进,求指教!!
关于jquery表单验证的问题,每个需要验证的都已经搞定了,现在的问题是:怎样在点击注册按钮的时候检查一下是否全部已经符合规则!在此先谢啦!!
css,js代码:

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script src="js/jquery-1.5.1.min.js" type="text/javascript"></script><script src="js/My97DatePicker/WdatePicker.js" type="text/javascript" language="javascript"></script><script src="js/LocationSelect/location.js" type="text/javascript"></script><script type="text/javascript">$(function(){          $("#loc").LocationSelect();});</script></head><style type="text/css">body{ margin:0 auto;}#top{ width:960px; height:25px;      margin:0 auto;      }     #top p{ margin-top:8px;}     #zhuce{ width:800px; height:78px;         margin:20px auto;}#loginTa{ width:800px; height:auto;                border:1px solid #DCDCDC;               background-color:#FDFDFD;               margin:10px auto;               }        #loginTa a{ text-decoration:none;}                .but1{ width:56px; height:25px;                background-color:#F4961A;                color:#FFFFFF;                border:0px;}                       .but1:hover{ background-color:#E66D02; border:0;}                .td66{ color:#666666; font-size:12px;}        input{ border:1px solid #CACACA;}        input:hover{ border:1px solid #64B0D7;}                .tdtitle{ color:#000000; font-size:14px;}         .onError{ background:url(images/reg3.gif) no-repeat 0 center; padding-left:25px;} .onSuccess{ background:url(images/reg4.gif) no-repeat 0 center; padding-left:25px;} span{ width:auto; height:30px;;} span font{ width:auto; height:25px; margin-bottom:5px; border:1px solid red; font-size:12px; padding:5px 5px 0px 5px; background-color:#FFF8ED;}          </style><script type="text/javascript">$(function(){                      $("form :input").blur(function(){          var $parent=$(this).parent();          $parent.find(".onError").remove();          $parent.find(".onSuccess").remove();                              if($(this).is('#user_name')){               var reg1=/^\b[a-zA-Z]$/;               var reg2=/^[a-zA-z][a-zA-Z0-9_]+$/;               var str=this.value;                                                            if(this.value==""){                    var errorMsg='请输入用户名!';                    $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');                                                   }else {                   if(this.value.length < 6 || this.value.length >10 || reg2.test(str)==false){                        var errorMsg='用户名格式不正确!';                        $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');                       }else {                                                  $.get("RegisterAjax.php",                                 {user_name:this.value},                              function(data,textstatus){                                  //alert(data);                                  if(data==1){                                                                               var errorMsg='该用户名已存在!';                                        $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');                                                                          }else{                                        $parent.append('<span class="onSuccess"> </span>');                                                                                return t_n=1;                                                                          }                                  }                           ),"text"                                        }                                                           }                  }                             if($(this).is('#user_pwd')){               var reg=/^\S{6,25}$/;               var str=this.value;               if(this.value==""){                    var errorMsg='请输入密码!';                    $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');                   }else{                     if(this.value.length < 6 || this.value.lenth >25 || reg.test(str)==false ){                         var errorMsg='密码格式不正确!';                         $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');                        }else{                         $parent.append('<span class="onSuccess"> </span>');                                                  return t_p=1;                                             }               }                }                    if($(this).is('#user_pwd2')){               var str=this.value;               if(this.value==""){                    var errorMsg='请再次输入密码!';                    $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');                   }else{                    if(this.value != $('#user_pwd').val()){                         var errorMsg='两次输入密码不一致,密码大小写敏感!';                         $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');                        }else{                         $parent.append('<span class="onSuccess"> </span>');                                                  return t_p2=1;                                             }               }                    }                    if($(this).is('#email')){               //var reg=/^([a-z0-9][a-z0-9_\-\.]+)@([a-z0-9][a-z0-9\.\-]{0,20})\.([a-z]{2,4})$/;               var reg=/^([a-zA-Z][a-zA-Z0-9_]+)@([a-zA-Z0-9]{0,20})\.([a-z]{2,4})$/;               var str=this.value;               if(this.value==""){                    var errorMsg='请输入邮箱!';                    $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');               }else{                   if(reg.test(str)==false){                        var errorMsg='邮箱格式错误!';                        $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');                   }else{                        $parent.append('<span class="onSuccess"> </span>');                                                return  t_e=1;                                           }               }                    }                    if($(this).is('#province')){               if(this.value==0){                    var errorMsg='请选择省份/直辖市!';                    $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');               }else{                    $parent.append('<span class="onSuccess"> </span>');                    return str;                    return true;                                   }          }                    if($(this).is('#city')){               if(this.value==0){                    var errorMsg='请选择市/区!';                    $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');               }else{                    $parent.append('<span class="onSuccess"> </span>');                    return str;                    return true;               }          }                    if($(this).is('#district')){               if(this.value==0){                    var errorMsg='请选择县/地区!';                    $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');               }else{                    $parent.append('<span class="onSuccess"> </span>');                    return str;                    return true;               }          }                    if($(this).is('#telephone')){               var reg1=/^\d{11}$/;               var reg2=/^\d{4}\-\d{8}$/;               var str=this.value;               if(this.value==""){                    var errorMsg='请输入联系电话!';                    $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');               }else{                    if( reg1.test(str)==false && reg2.test(str)==false ){                        var errorMsg='联系电话格式错误,请重填!';                        $parent.append('<span class="onError"><font>'+errorMsg+'</font></span>');                   }else{                        $parent.append('<span class="onSuccess"> </span>');                                                return t_t=1;                                                                   }               }                    }                         });                   }); </script> 



[解决办法]
不改变你的架构的情况下 只需要增设一个全局变量, 设定初始值为true 在每1个判定条件下如果errorMsg了 就设定成false,在提交的时候判断是否为true true的话验证通过可以提交,false的话就不允许提交
[解决办法]
推荐用 jquery.validate.js,这个全部整合好了
http://www.cnblogs.com/easyit/articles/1733788.html
[解决办法]
js检查代码改为函数!不符合条件就return false
form表单用加入onsubmit=“return 检查函数()”

[解决办法]
你可以这样写:

$('注册按钮').click(function(){
$("form :input").trigger('blur'); //先触发失去焦点事件,没有错误就注册成功了
var numError = $('form .onError').length;
if(numError){
return false;
}
//注册成功
});

还有,下面这个会不会更好呢? 其中意思自己慢慢体会...
$("form :input").blur(function(){
。。。
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});

读书人网 >JavaScript

热点推荐