注册页面实现jquery验证提交

---

时间：2014年12月03日 02:24:36点击：1447类别：代码分析

$(document).ready(function() {
	$('#submit').attr({"disabled":"disabled"});
	var va_user=false;
	var va_pass=false;
	var va_pass2=false;
	var va_email=false;
	 $("input#username").blur(function(){
	  var username = $.trim($("input#username").val());
	  var len=username.length
	  if(len<6){
		  $('label#name_errors').html('&times  只能是字母数字且不能少于6个字符哦');
		  $('#submit').attr({"disabled":"disabled"});
	  }else{
		  $.get("http://{{ localip }}/MyBlog/checkuser/?username="+username,function(data,status){
			     if (data == "null"){
			      $('label#name_errors').html('"√  ' + username + '"可以注册');
			      va_user=true;
			      if(va_user&&va_pass&&va_pass2&&va_email){
						 $('#submit').removeAttr("disabled");
					 }else{
						 $('#submit').attr({"disabled":"disabled"});
					 }
			     }else{
			      $('label#name_errors').html('&times  “' + username + '”已被注册');
			      $('#submit').attr({"disabled":"disabled"});
			     }});
	  }});
	 $("input#password").blur(function(){
		 var password = $.trim($("input#password").val());
		 var plen =password.length;
		 if(plen<6){
			 $('label#password_errors').html('&times  密码不能少于6个字符！');
			 $('#submit').attr({"disabled":"disabled"});
		 }else{
			 $('label#password_errors').html('√  密码符合规范！');
			 va_pass=true;
			 if(va_user&&va_pass&&va_pass2&&va_email){
				 $('#submit').removeAttr("disabled");
			 }else{
				 $('#submit').attr({"disabled":"disabled"});
			 }
		 }
	 });
	 $("input#password2").blur(function(){
		 var password = $.trim($("input#password").val());
		 var password2 = $.trim($("input#password2").val());
		 var plen =password2.length;
		 if(plen<6){
			 $('label#password2_errors').html('&times  密码不能少于6个字符！');
			 $('#submit').attr({"disabled":"disabled"});
		 }else if(password==password2){
			 $('label#password2_errors').html('√  两次密码一致！');
			 va_pass2=true;
			 if(va_user&&va_pass&&va_pass2&&va_email){
				 $('#submit').removeAttr("disabled");
			 }else{
				 $('#submit').attr({"disabled":"disabled"});
			 }
		 }else{
			 $('label#password2_errors').html('&times  两次密码不一致，请重新输入！');
			 $('#submit').attr({"disabled":"disabled"});
		 }
	 });
	 $("input#email").blur(function(){
		 var email_addr=$.trim($("input#email").val());
		 if (!email_addr.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)){
			 $('label#email_errors').html('&times  邮箱格式不正确！');
			 $('#submit').attr({"disabled":"disabled"});
		 }else{
			 $('label#email_errors').html('√  邮箱格式正确，请提交注册信息！');
			 va_email=true;
			 if(va_user&&va_pass&&va_pass2&&va_email){
				 $('#submit').removeAttr("disabled");
			 }else{
				 $('#submit').attr({"disabled":"disabled"});
			 }
		 }
	 }); 
	 });

 前提条件是所有的输入框都是绑定了blur事件，在这个js函数中定义了4个全局变量，分别是va_username;va_password;va_password2;va_email。这四个变量不用说大家都知道，这是为了验证输入是否合法的，当某一个文本输入框的验证通过后，将该变量设置为true，最后所有的验证变量进行与（&&）运算，如果一个条件不满足，那么提交按钮就不能激活，这是硬性条件。

但是，后来考虑到这样做界面不太友好，所以放弃这个思路，转而投向提交按钮的click事件，在click事件中对输入框内容验证结果进行最终的判定，所以jquery的优势也就在这，可以很方便的取得CSS元素，并对元素进行操作。

 

坤坤大神

2014/12/03

友情链接：skyhome 《看你有多快》。

楼主kkds2014

喜欢：(1447)  回复：(3)

以下为回复内容

---

---

---

也回复一个  举报