詳解正則表達(dá)式表單驗(yàn)證實(shí)例

!DOCTYPE html>
 html lang="en">
 head>
 meta charset="UTF-">
 title>正則驗(yàn)證常用表單方法/title>
 script type="text/javascript">
 function focus_username() {
  var resultObj=document.getElementById('result_username');
  resultObj.innerHTML="以字母開(kāi)頭的-位的字符";
  resultObj.style.color="blue";
  document.form.username.style="border:px solid red";
 } 
 // function blur_username () {
 //第一種方法：
 // var resultObj=document.getElementById('result_username') 
 // if (document.form.username.value=='') {
 // resultObj.innerHTML="用戶名不能為空";
 // resultObj.style.color="red";
 // return false;
 // }else if (document.form.username.value.length||document.form.username.value.length>) {
 // resultObj.innerHTML="用戶名字符長(zhǎng)度必須介于到個(gè)之間";
 // resultObj.style.color="red";
 // return false;
 // }else{
 // resultObj.innerHTML="ok";
 // resultObj.style.color="green";
 // }
 // }
 function blur_username () {
  //第二種方法：
  var resultObj=document.getElementById('result_username') 
  var pre=document.form.username.value;
  var reg=/^[a-zA-Z]\w{,}$/;
  if (pre=='') {
  resultObj.innerHTML="(必填項(xiàng))用戶名不能為空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="用戶名字符輸入不合法";
  resultObj.style.color="red";
  return false;
  }else{
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  }
 }
 function focus_userpwd() {
 var resultObj=document.getElementById('result_userpwd');
 resultObj.innerHTML="(必填項(xiàng))介于-位的非特殊字符";
 resultObj.style.color="blue";
 document.form.userpwd.style="border:px solid red";
 } 
 // function blur_userpwd () {
 // var resultObj=document.getElementById('result_userpwd') 
 // if (document.form.userpwd.value=='') {
 // resultObj.innerHTML="用戶名密碼不能為空";
 // resultObj.style.color="red";
 // return false;
 // }else if (document.form.userpwd.value.length||document.form.userpwd.value.length>) {
 // resultObj.innerHTML="用戶名密碼字符長(zhǎng)度必須介于到個(gè)之間";
 // resultObj.style.color="red";
 // return false;
 // }else{
 // resultObj.innerHTML="ok";
 // resultObj.style.color="green";
 // return true;
 // }
 // }
 function blur_userpwd () { 
 var resultObj=document.getElementById('result_userpwd') 
  var pre=document.form.userpwd.value;
  var reg=/^\w{,}$/;
 if (pre=='') {
  resultObj.innerHTML="(必填項(xiàng))用戶名密碼不能為空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="用戶名密碼字符輸入不合法";
  resultObj.style.color="red";
  return false;
  }else{
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  }
 }
 function focus_userpwd() {
 var resultObj=document.getElementById('result_userpwd');
 resultObj.innerHTML="(必填項(xiàng))介于-位的非特殊字符";
 resultObj.style.color="blue";
 document.form.userpwd.style="border:px solid red";
 } 
 // function blur_userpwd () {
 // var resultObj=document.getElementById('result_userpwd') 
 // if (document.form.userpwd.value=='') {
 // resultObj.innerHTML="用戶名密碼不能為空";
 // resultObj.style.color="red";
 // return false;
 // }else if (document.form.userpwd.value!=document.form.userpwd.value) {
 // resultObj.innerHTML="兩次用戶名密碼輸入不一致";
 // resultObj.style.color="red";
 // return false;
 // }else{
 // resultObj.innerHTML="ok";
 // resultObj.style.color="green";
 // return true;
 // }
 // } 
 function blur_userpwd () {
  var resultObj=document.getElementById('result_userpwd') 
  var pre=document.form.userpwd.value;
  var reg=/^\w{,}$/;
  if (pre=='') {
  resultObj.innerHTML="(必填項(xiàng))用戶名密碼不能為空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="用戶名密碼字符輸入不合法";
  resultObj.style.color="red";
  return false;
  }else if(document.form.userpwd.value!=document.form.userpwd.value){
  resultObj.innerHTML="兩次用戶名密碼輸入不一致";
  resultObj.style.color="red";
  return false;
  }else {resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  }  
 }
 function focus_Mobile() {
  var resultObj=document.getElementById('result_Mobile');
  resultObj.innerHTML="請(qǐng)輸入你位數(shù)的手機(jī)號(hào)碼";
  resultObj.style.color="blue";
  document.form.Mobile.style="border:px solid red";
 } 
 function blur_Mobile() { 
  var resultObj=document.getElementById('result_Mobile') 
  var pre=document.form.Mobile.value;
  var reg=/^[||][-]{}$/;
  if (pre=='') {
  resultObj.innerHTML="手機(jī)號(hào)碼不能為空";
  resultObj.style.color="red";  
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="手機(jī)號(hào)碼字符輸入不合法";
  resultObj.style.color="red";  
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green";  
  }  
 }
 function focus_Tel() {
  var resultObj=document.getElementById('result_Tel');
  resultObj.innerHTML="請(qǐng)輸入你的座機(jī)號(hào)碼";
  resultObj.style.color="blue";
  document.form.Tel.style="border:px solid red";
 } 
 function blur_Tel() { 
  var resultObj=document.getElementById('result_Tel') 
  var pre=document.form.Tel.value;
  var reg=/^{}[-]{,}\-[]?[-]{}$/;
  if (pre=='') {
  resultObj.innerHTML="座機(jī)號(hào)碼不能為空";
  resultObj.style.color="red";
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="座機(jī)號(hào)碼字符輸入不合法";
  resultObj.style.color="red";
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green";  
  }  
 }
 function focus_mail() {
  var resultObj=document.getElementById('result_mail');
  resultObj.innerHTML="請(qǐng)輸入你的郵箱號(hào)碼";
  resultObj.style.color="blue";
  document.form.mail.style="border:px solid red";
 } 
 function blur_mail() { 
  var resultObj=document.getElementById('result_mail');
  var pre=document.form.mail.value;
  var reg=/^[a-zA-Z-][a-zA-Z-\._]+@[a-z-]+\.(com)(\.(cn))?$/;
  if (pre=='') {
  resultObj.innerHTML="郵箱號(hào)碼不能為空";
  resultObj.style.color="red";
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="郵箱號(hào)碼字符輸入不合法";
  resultObj.style.color="red";
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  }  
 }
 function focus_ID() {
  var resultObj=document.getElementById('result_ID');
  resultObj.innerHTML="(必填項(xiàng))請(qǐng)輸入你位的二代身份證號(hào)碼";
  resultObj.style.color="blue";
  document.form.ID.style="border:px solid red";
 } 
 function blur_ID() { 
  var resultObj=document.getElementById('result_ID');
  var pre=document.form.ID.value;
  var reg=/^[-]{}[-x]$/;
  if (pre=='') {
  resultObj.innerHTML="(必填項(xiàng))二代身份證號(hào)碼字符不能為空";
  resultObj.style.color="red";
  return false;
  }else if (!reg.test(pre)) {
  resultObj.innerHTML="二代身份證號(hào)碼字符輸入不合法";
  resultObj.style.color="red";
  return false;
  }else {
  resultObj.innerHTML="ok";
  resultObj.style.color="green";
  return true;
  }  
 }
 function checkForm(){
  var flag_username=blur_username();
  var flag_userpwd=blur_userpwd();
  var flag_userpwd=blur_userpwd();
  var flag_ID=blur_ID();  
  if (flag_username==trueflag_userpwd==trueflag_userpwd==trueflag_ID==true) {  
  return true;
  }else{
  return false;
  } 
 }
 /script>
 style type="text/css">
 body{background-image: url(images/.jpg);background-size: cover;}
 table{margin-left: px;margin-top: px;background-image: url(images/.jpg);background-size: cover;box-shadow: px px px #C}
 .vip{font-size: px;}
 /style>
 /head>
 body>
 form name="form" action=".php" method="post" onsubmit="return checkForm()">
 table width="px" border="px" bordercolor="red" cellpadding="px" cellspacing="px" align="center" >
 tr>
  th colspan="" class="vip">VIP會(huì)員注冊(cè)/th>
 /tr>
 tr>
  td width="px" align="right" >用戶名：/td>
  td width="px">input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" >/td>
  td>div width="px" id="result_username">/div>/td>
 /tr>
 tr>
  td align="right">密碼：/td>
  td>input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" />/td>
  td>div id="result_userpwd">/div>/td>
 /tr>
 tr>
  td align="right">確認(rèn)密碼：/td>
  td>input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/>/td>
  td>div id="result_userpwd">/div>/td>
 /tr>
 tr>
  td align="right">手機(jī)號(hào)碼：/td>
  td>input type="text" name="Mobile" onfocus="focus_Mobile()" onblur="blur_Mobile()"/>/td>
  td>div id="result_Mobile">/div>/td>
 /tr>
 tr>
  td align="right">座機(jī)號(hào)碼：/td>
  td>input type="text" name="Tel" onfocus="focus_Tel()" onblur="blur_Tel()"/>/td>
  td>div id="result_Tel">/div>/td>
 /tr>
 tr>
  td align="right">郵箱號(hào)碼：/td>
  td>input type="text" name="mail" onfocus="focus_mail()" onblur="blur_mail()"/>/td>
  td>div id="result_mail">/div>/td>
 /tr>
 tr>
  td align="right">二代身份證：/td>
  td>input type="text" name="ID" onfocus="focus_ID()" onblur="blur_ID()"/>/td>
  td>div id="result_ID">/div>/td>
 /tr>
 tr>
  td align="center" colspan="">input type="submit" value="提交注冊(cè)" />
  input type="reset" value="重置資料" />/td>
  td>/td>
 /tr>
 /table>
 /form> 
 /body>
 /html>