前端表单js验证笔记

09420171003

//$(function(){
//	
//});

window.onload = function(){
	//姓名验证
	emp_name.onblur = function(){
		if(emp_name.value.length < 3){
			empHint.innerHTML = "姓名长度太短！";
		}
	};
	emp_name.onfocus = function(){
		empHint.innerHTML = "";
	};

	//邮箱验证
	ema.onblur = function(){
		var pattern = /^([A-Za-z0-9]){1}([A-Za-z0-9_-])+@([a-z0-9])+\.{1}((com)|(cn)|(net))$/g;
		if(!pattern.test(ema.value) ){
			emialHint.innerHTML = "邮箱格式不正确！";	
		}
	};
	ema.onfocus = function(){
		emialHint.innerHTML = "";
	};
	
	//地址验证
	addr.onblur = function(){
		if(addr.value.length ===0){
			addrHint.innerHTML = "地址不能为空！";
		}
	};
	addr.onfocus = function(){
		addrHint.innerHTML = "";
	};
	
	//手机验证
	phone.onblur = function(){
		var pattern = /^1[3|5|7|8]\d{9}$/g;
		if(!pattern.test(phone.value) ){
			phoneHint.innerHTML = "手机格式不正确！";	
		}
	};
	phone.onfocus = function(){
		phoneHint.innerHTML = "";
	};
	
	//电话验证
	tel.onblur = function(){
		var pattern = /\d{3}-\d{8}|\d{4}-\{7,8}/g;
		if(!pattern.test(tel.value) ){
			telHint.innerHTML = "电话格式不正确！";	
		}
	};
	tel.onfocus = function(){
		telHint.innerHTML = "";
	};
	
	//QQ验证
	qq.onblur = function(){
		var pattern = /[1-9][0-9]{4,}$/g;
		if(!pattern.test(qq.value) ){
			qqHint.innerHTML = "QQ格式不正确！";	
		}
	};
	qq.onfocus = function(){
		qqHint.innerHTML = "";
	};
	
	//民族验证
	nation.onblur = function(){
		if(nation.value.length === 0){
			nationHint.innerHTML = "不能为空！";
		}
	};
	nation.onfocus = function(){
		nationHint.innerHTML = "";
	};
	
	//邮编验证
	zip.onblur = function(){
		var pattern = /[1-9]\d{5}(?!\d)$/g;
		if(!pattern.test(zip.value) ){
			zipHint.innerHTML = "邮编格式不正确！";	
		}
	};
	zip.onfocus = function(){
		zipHint.innerHTML = "";
	};
	
	//爱好验证
	hobby.onblur = function(){
		if(hobby.value.length === 0){
			hobbyHint.innerHTML = "不能为空！";
		}
	};
	hobby.onfocus = function(){
		hobbyHint.innerHTML = "";
	};
	
	//生日验证
	birth.onblur = function(){
		var pattern = /([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))$/g;
		if(!pattern.test(birth.value) ){
			birthHint.innerHTML = "生日格式不正确！";	
		}
	};
	birth.onfocus = function(){
		birthHint.innerHTML = "";
	};
	
	//政治面貌验证
	party.onblur = function(){
		if(party.value.length === 0){
			partyHint.innerHTML = "不能为空！";
		}
	};
	party.onfocus = function(){
		partyHint.innerHTML = "";
	};
	
}
//省份证ajax验证
function showHint(str) {

	if (str.length==0) { 
		document.getElementById("cardHint").innerHTML="";
		return;
	}
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null) {
		alert ("您的浏览器不支持AJAX！");
		return;
	}
	var url="emp_card";
	url=url+"?card_code="+str;
	url=url+"&sid="+Math.random();
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",url,false);
	xmlHttp.send(null);
}
/**
 * 兼容所有浏览器
 * @returns {___anonymous_xmlHttp}
 */
function GetXmlHttpObject() {
	var xmlHttp=null;
	try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e) {
		// Internet Explorer
		try {
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}
function stateChanged() { 
	if (xmlHttp.readyState==4) { 
		document.getElementById("cardHint").innerHTML=xmlHttp.responseText;
	}
}<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>




   
   

 rel="stylesheet" type="text/css" href="css/bootstrap.css"
	media="all">

   
   
 rel="stylesheet" type="text/css" href="css/css.css" media="all">

   
   
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

   
   
<script src="js/bootstrap.js" type="text/javascript"></script>

   
   
<script src="js/add-emp.js" type="text/javascript"></script>


	
   
   
	
   
   
	
   
   
	
   
   

		
    
    

			
     
     

				
      
      
				
      
      
				
      
      

					
       
       
					
       
       

         当前位置： 
        员工列表 > 员工添加 
       
					
       
       
					
       
       
 
        
 
         姓名 
          
         
  
 
        
 
        
 
         身份证号 
          
         
  
 
        
 
        
 
         学历 
         小学初中高学专科本科研究生硕士博士硕士后 
        
 
        
 
        
 
        
 
         邮箱 
          
         
  
 
        
 
        
 
         联系地址 
          
         
  
 
        
 
        
 
         手机 
          
         
  
 
        
 
        
 
        
 
        
 
         电话 
          
         
  
 
        
 
        
 
         所属专业 
          
        
 
        
 
         QQ 
          
         
  
 
        
 
        
 
        
 
        
 
         民族 
          
         
  
 
        
 
        
 
         邮政编码 
          
         
  
 
        
 
        
 
         爱好 
          
         
  
 
        
 
        
 
        
 
        
 
         生日 
          
         
  
 
        
 
        
 
         政治面貌 
          
         
  
 
        
 
        
 
         备注 
          
        
 
        
 
        
 
        
 
         职位 
         ${job.name} 
        
 
        
 
         所属部门 
         ${dept.name} 
        
 
        
 
         性别 
         男女 
        
 
        
 
        
 
        
 
         添加 
         取消