js表单失焦验证和提交验证，很便捷的做法！

表单验证脚本解析

最新推荐文章于 2022-09-13 20:46:37 发布

原创最新推荐文章于 2022-09-13 20:46:37 发布 · 827 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #form表单提交 #表单失焦验证+提交验证 #ViewUI

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

6 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的表单验证脚本，包括对姓名、身份证号码、联系地址、邮编、邮箱及密码等字段的有效性验证，并检查用户是否同意相关协议。

$(document).ready(function() {


    $("form :input").blur(function() {
		var $parent = $(this).parent();
		$parent.find(".correct2").remove();
		//进行下一步判断前把之前的结果清除
//姓名验证
		if($(this).is("#clientName")) {
			var name_reg = /[^\u4e00-\u9fa5]/;
			if(name_reg.test($("#clientName").val())){
				infohtml($(".name_nifo"),"请输入中文名字",false);
				return false;  
			}else if($("#clientName").val()==""){
				infohtml($(".name_nifo"),"姓名不能为空",false);
				return false; 
			}else{
				infohtml($(".name_nifo"),"",true);
			}
		};
//身份证验证
		if($(this).is("#idNo")) {
			
		   if(checkCardId($("#idNo").val())===false)
		   {
		   		infohtml($(".Identity_card_info"),"您输入身份证有误",false);
		   		return false;    
		   }else if( !is18Ready($("#idNo").val())){
				infohtml($(".Identity_card_info"),"未满18周岁",false);
		   		return false;
			}else{
		   		infohtml($(".Identity_card_info"),"",true);
		   }
		}
//联系地址验证不能空
		if($(this).is("#address")) { 
			
			if($("#address").val()==""){
        	infohtml($(".yy_addres_info"),"联系地址不能为空",false);
			return false;
	        }else if(/^\s+/g.test($("#address").val())){
			infohtml($(".yy_addres_info"),"联系地址不能为空",false);
			return false;
			}else{
	        	infohtml($(".yy_addres_info"),"",true);
	        }
		}
//邮编验证不能空
		if($(this).is("#zipcode")) {
			
			var pattern =/^[0-9]{6}$/;
			if($("#zipcode").val()==""){
        		infohtml($(".Zipcode_info"),"邮编不能为空",false);
				return false;
	        }else if(!pattern.exec($("#zipcode").val())){
	        	infohtml($(".Zipcode_info"),"邮编格式不正确",false);
	        	return false;
	        }else{
	        	infohtml($(".Zipcode_info"),"",true);
	        }
		}
//邮箱验证
		if($(this).is("#eMail")) {
			var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
	        if (reg.test($("#eMail").val())) {
	        	infohtml($(".yy_Email_info"),"",true);
	        }else if($("#eMail").val()==""){
	        	infohtml($(".yy_Email_info"),"邮箱不能为空",false);
	        	return false;
	        }else {
	        	infohtml($(".yy_Email_info"),"您输入的邮箱地址不正确",false);
	        	return false;
	        }
		}
//交易密码验证
		if($(this).is("#password")) {
			var score = 0;
			$("#password").keydown(function(event){
				if(parseInt(event.keyCode)==32){
	                return false;
			    }
		        $this = $(this).val();
		        $('.yy_possul li:even:gt(0)').removeClass().addClass('yy_possul_li1');
		        if ( /[a-z]+/.test($this) ) score++;
		        if (/\d+/.test($this))  score++;
		        if (/["[`~%!@#^=''?~！@#￥……&——‘”“'？*()（），,。.、]/.test($this)) score++;
		        $('.yy_possul li:even:lt('+score+')').removeClass().addClass('yy_possul_li1 Brown');
		        score = 0;  
			});
			
	
	        if($("#password").val()==""){
	        	infohtml($(".yy_password_info"),"交易密码不能为空",false);
	        	return false;    
	        }else if($("#password").val().length<6){
	        	infohtml($(".yy_password_info"),"请输入6-8个字符",false);
	        	return false;    
	        }else{
	        	infohtml($(".yy_password_info"),"",true);
	        }
		}
//确认密码验证
		if($(this).is("#yy_password2")) {
			if($("#yy_password2").val()===$("#password").val()){
                infohtml($(".yy_password2_info"),"",true);
			}else{
	        	infohtml($(".yy_password2_info"),"两次输入密码不一致，请重新输入",false);
	        	return false;    
	        }
		}
//判断是否勾选协议
		
		
	});
	$("#submit").click(function() {
		var check_b=$(".yy_check_b");
		var check_c=$(".yy_check_c");
		
		
		$("form :input").trigger("blur");
		var errorNum = $("form .warning2").length;
		
		if(errorNum) {
			return false;
		}else if(check_b.attr("checked")===undefined || check_c.attr("checked")===undefined ){
				alert("请阅读《开户协议》与《用户须知》")
				return false;
			
		}
		
	});
});
  function infohtml(elem_t,mg,flog){
  	if(flog){
    	elem_t.removeClass("warning2").addClass(' correct2');
    	elem_t.text(mg);
   	}else{
    	elem_t.removeClass("correct2").addClass(' warning2');
    	elem_t.text(mg);
    }
  }
//是否满18岁
function is18Ready(idCard){
  var birthday;
  if(idCard.length == 15){
    birthday = idCard.substring(6, 12);
  } else if(idCard.length == 18){
    birthday = idCard.substring(6, 14);
	
  }
  var thisYear = birthday.substring(0, 4);
  var thisMonth = parseInt(birthday.substring(4, 6), 10) - 1;
  var thisDate = birthday.substring(6);
  var birthdayDate = new Date(thisYear, thisMonth, thisDate);
  var now = new Date();
  
  if(now.getTime() - birthdayDate.getTime() >= 1000*60*60*24*365*18){
	 return true;
	}else{return false;};
  
}	
	
function checkCardId(socialNo){

	  if(socialNo == "")
	  {
	   
	    return (false);
	  }

	  if (socialNo.length != 15 && socialNo.length != 18)
	  {
	    
	    return (false);
	  }
		
	 var area={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}; 
	   
	   if(area[parseInt(socialNo.substr(0,2))]==null) {
	   	
	    	return (false);
	   } 
	    	
	  if (socialNo.length == 15)
	  {
	     pattern= /^\d{15}$/;
	     if (pattern.exec(socialNo)==null){
			
			return (false);
	    }
		var birth = parseInt("19" + socialNo.substr(6,2));
		var month = socialNo.substr(8,2);
		var day = parseInt(socialNo.substr(10,2));
		switch(month) {
			case '01':
			case '03':
			case '05':
			case '07':
			case '08':
			case '10':
			case '12':
				if(day>31) {
					
					return false;
				}
				break;
			case '04':
			case '06':
			case '09':
			case '11':
				if(day>30) {
					
					return false;
				}
				break;
			case '02':
				if((birth % 4 == 0 && birth % 100 != 0) || birth % 400 == 0) {
					if(day>29) {
						
						return false;
					}
				} else {
					if(day>28) {
						
						return false;
					}
				}
				break;
			default:
				
				return false;
		}
		var nowYear = new Date().getYear();
		if(nowYear - parseInt(birth)<15 || nowYear - parseInt(birth)>100) {
			
			return false;
		}
	    return (true);
	  }
	  
	  var Wi = new Array(
	            7,9,10,5,8,4,2,1,6,
	            3,7,9,10,5,8,4,2,1
	            );
	  var   lSum        = 0;
	  var   nNum        = 0;
	  var   nCheckSum   = 0;
	  
	    for (i = 0; i < 17; ++i)
	    {
	        

	        if ( socialNo.charAt(i) < '0' || socialNo.charAt(i) > '9' )
	        {
	           
	            return (false);
	        }
	        else
	        {
	            nNum = socialNo.charAt(i) - '0';
	        }
	         lSum += nNum * Wi[i];
	    }

	  
	    if( socialNo.charAt(17) == 'X' || socialNo.charAt(17) == 'x')
	    {
	        lSum += 10*Wi[17];
	    }
	    else if ( socialNo.charAt(17) < '0' || socialNo.charAt(17) > '9' )
	    {
	        
	        return (false);
	    }
	    else
	    {
	        lSum += ( socialNo.charAt(17) - '0' ) * Wi[17];
	    }

	    
	    
	    if ( (lSum % 11) == 1 )
	    {	
	        return true;
	    }
	    else
	    {
	        
	        return (false);
	    }
		
}

欢迎访问小站：www.it-fans.com