前端表单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} 
        性别 
         男
女 
        

添加 
         取消