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");
});