js 表單驗證明例

gspan.html

?

< html > < head >      < title >表單驗證明例</ title >      < meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      < script src="check.js" type="text/javascript"></ script >      < style >          span{ font-size:12px; }          .stats1{ color : #ccc; }          .stats2{ color :black; }          .stats3{ color :red; }          .stats4{ color :green; }        </ style > </ head > < body >      < form method="post" action="reg.php" onsubmit="return regs('click')" >          用戶名：< input type="text" name="username" />< span class="stats1">用戶名不能爲空</ span >< br />          郵箱：< input type="text" name="email" />< span class="stats1">郵箱不能爲空</ span >< br />          密碼：< input type="password" name="password" />< span class="stats1">密碼不能爲空</ span >< br />          確認密碼：< input type="password" name="chkpass" />< span class="stats1">密碼不能爲空</ span >< br />          < input type="submit" />      </ form > </ body > </ html >

 

check.js

?

function gspan(cobj){       //獲取表單後的span 標籤 顯示提示信息      if (cobj.nextSibling.nodeName != 'SPAN' ){          gspan(cobj.nextSibling);      } else {          return cobj.nextSibling;      } }   //檢查表單 obj【表單對象】， info【提示信息】 fun【處理函數】  click 【是否須要單擊， 提交時候須要觸發】 function check(obj, info, fun, click){      var sp = gspan(obj);      obj.onfocus = function (){          sp.innerHTML = info;          sp.className = 'stats2' ;      }        obj.onblur = function (){          if (fun( this .value)){              sp.innerHTML = "輸入正確！" ;              sp.className = "stats4" ;          } else {              sp.innerHTML = info;              sp.className = "stats3" ;          }      }        if (click == 'click' ){          obj.onblur();      } }   onload = regs;      //頁面載入完執行   function regs(click){      var stat = true ;        //返回狀態， 提交數據時用到      username = document.getElementsByName( 'username' )[0];      password = document.getElementsByName( 'password' )[0];      chkpass = document.getElementsByName( 'chkpass' )[0];      email = document.getElementsByName( 'email' )[0];            check(username, "用戶名的長度在3-20之間" , function (val){          if (val.match(/^\S+$/) && val.length >=3 && val.length <=20){              return true ;          } else {              stat = false ;              return false ;          }      }, click);        check(password, "密碼必須在6-20位之間" , function (val){          if (val.match(/^\S+$/) && val.length >= 6 && val.length <=20){              return true ;          } else {              stat = false ;              return false ;          }      }, click);              check(chkpass, "肯定密碼要和上面一致，規則也要相同" , function (val){          if (val.match(/^\S+$/) && val.length >=6 && val.length <=20 && val == password.value){              return true ;          } else {              stat = false ;              return false ;          }      }, click);        check(email, "請按郵箱規則輸入" , function (val){          if (val.match(/\w+@\w+\.\w/)){              return true ;          } else {              stat = false ;              return false ;          }      }, click);      return stat; }