一個即時表單驗證的javascript代碼

2019-11-21 02:01:14

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>可愛吧--教你做可愛女人--化妝 美容 美化 瘦身 護膚--深圳可愛吧</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="description" content="可愛吧,美容瘦身,健體,生活情感受,提供最新少女裝,淑女裝,OL裝,日韓流行飾品,服飾搭配,流行品牌等信息." /> <meta name="keywords" content="可愛吧,美容瘦身,健體,生活情感受,2007年,少女,淑女,OL,日韓,服裝,搭配,流行,時尚,品牌,飾品,服飾搭配" /> <link href="http://www.lovebars.cn/lovebars/bbs/styles/styles5.css" rel="stylesheet" type="text/css" /> <script language="javascript"> // 此腳本由劉海民編寫 // 網(wǎng)站：http://www.szrgb.net // 郵箱：lovelium@gmail.com var num=5; var mon1=0; var mon2=0; var mon3=0; var mon4=0; var mon5=0; //封裝得到對像ID涵數(shù) function getObj(objName){return(document.getElementById(objName));} //input得到焦點效果 function showare(id){         for(var i=1;i<=num;i++){         if(i==id) {          getObj("sps"+i).className="reg2";     }         else{           if(i==num || i==(id-1)){              getObj("sps"+i).className="reg1";              }           else{              getObj("sps"+i).className="reg1";              }          }     } } //過濾 function RTrim(str) {  var whitespace=new String(" /t/n/r");  var s=new String(str);  if (whitespace.indexOf(s.charAt(s.length-1))!=-1)  {   var i=s.length-1;   while (i>=0 && whitespace.indexOf(s.charAt(i))!=-1)   {    i--;   }     s=s.substring(0,i+1);   }  return s; } //過濾 function LTrim(str) {  var whitespace=new String(" /t/n/r");  var s=new String(str);  if (whitespace.indexOf(s.charAt(0))!=-1)  {   var j=0, i = s.length;   while (j<i && whitespace.indexOf(s.charAt(j))!=-1)  {   j++;  }    s=s.substring(j,i);  }   return s; } function Trim(str) {  return RTrim(LTrim(str)); } //郵箱驗證涵數(shù) function isemail(s) {  var i=1;  var sLength=s.length;  while((i<sLength)&&(s.charAt(i)!="@"))  {   i++;  }  //不存在@返回false  if((i>=sLength)||(s.charAt(i)!="@"))   return false;  else   i+=2;  //找到'.'的位置  while((i<sLength)&&(s.charAt(i)!="."))  {   i++;  }  //如果找不到. 肯定不是一個有效的Email  if((i>=sLength-1)||(s.charAt(i)!="."))   return false;  else   return true; }    //用戶名檢測 function checkloginname() {   if (getObj("input1").value=="" || Trim(getObj("input1").value)=="")  {     getObj("sps1").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>請輸入注冊用戶名！</font>";    mon1=0;   getObj("checkuserme").disabled=true;    allok();    return false;  }else{  if (Trim(getObj("input1").value).indexOf(" ")>=0)   {     getObj("sps1").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>注冊用戶名中不能包含空格！</font>";    mon1=0;   getObj("checkuserme").disabled=true;    allok();   return false;   }else{  if (Trim(getObj("input1").value).length<3)   {     getObj("sps1").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>注冊用戶名不能少于3個字符！</font>";    mon1=0;   getObj("checkuserme").disabled=true;    allok();   return false;   }else{  if (Trim(getObj("input1").value).length>20)   {     getObj("sps1").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>注冊用戶名不能超過20個字符！</font>";    mon1=0;   getObj("checkuserme").disabled=true;    allok();   return false;  }else{  getObj("sps1").innerHTML="<img src='https://www.jb51.netimages/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>用戶名OK啦！但為了更好的注冊希望您可以驗證一下是否可用此用戶名。很簡單，點一下現(xiàn)在按鈕就行啦！</font>";    mon1=1;   getObj("checkuserme").disabled=false;    allok();   return false; } } } } } //輸入密碼檢測 function checkpassword() {   if (getObj("input2").value=="" || Trim(getObj("input2").value)=="")  {     getObj("sps2").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>請輸入注冊密碼！</font>";    mon2=0;    allok();    return false;  }else{  if (Trim(getObj("input2").value).indexOf(" ")>=0)   {     getObj("sps2").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>密碼中不能包含空格！</font>";    mon2=0;    allok();   return false;   }else{  if (Trim(getObj("input2").value).length<4)   {     getObj("sps2").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>密碼不能少于4個字符！</font>";    mon2=0;    allok();   return false;   }else{  if (Trim(getObj("input2").value).length>20)   {     getObj("sps2").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>密碼不能超過20個字符！</font>";    mon2=0;    allok();   return false;  }else{    getObj("sps2").innerHTML="<img src='https://www.jb51.netimages/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>密碼設(shè)置OK啦！</font>";     mon2=1;    allok();    return false; }  }  }  } } //重復(fù)輸入密碼檢測 function checkreturnpass() {   if (getObj("input3").value=="" || Trim(getObj("input3").value)=="")  {     getObj("sps3").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>請確認密碼！</font>";    mon3=0;    allok();    return false;  }else{    if(getObj("input2").value!=getObj("input3").value)    {      getObj("sps3").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>您兩次輸入的密碼不相符！</font>"    mon3=0;    allok();      return false;    }else{     getObj("sps3").innerHTML="<img src='https://www.jb51.netimages/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>您兩次輸入的密碼十分相符！</font>"    mon3=1;    allok();      return false;  } } } //郵箱檢測 function checkmyemail() {   if (getObj("input4").value=="" || Trim(getObj("input4").value)=="")  {     getObj("sps4").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>請正確輸入您的E-Mail地址！</font>"    mon4=0;    allok();    return false;  }else{  if(!isemail(getObj("input4").value))  {    getObj("sps4").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>您輸入的E-Mail地址無效！</font>"    mon4=0;    allok();    return false;  }else{    getObj("sps4").innerHTML="<img src='https://www.jb51.netimages/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>您輸入的E-Mail地址OK啦！</font>"    mon4=1;    allok();    return false; }  } } //同意按鈕檢測 function chekme1(){    mon5=1;    allok();    return false; } function chekme2(){    mon5=0;    allok();    return false; } //全部檢測（選部分檢測） function checkall(){  if (getObj("input1").value=="" || Trim(getObj("input1").value)=="")   {     getObj("sps1").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>請輸入注冊用戶名！</font>";    mon1=0;    allok();     return false;    }  if (getObj("input2").value=="" || Trim(getObj("input2").value)=="")  {     getObj("sps2").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>請輸入注冊密碼！</font>";    mon2=0;    allok();    return false;  }  if (getObj("input3").value=="" || Trim(getObj("input3").value)=="")  {     getObj("sps3").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>請確認密碼！</font>";    mon3=0;    allok();    return false;  }  if (getObj("input3").value!=getObj("input2").value)  {   getObj("sps3").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>請確認密碼正確！</font>";    mon3=0;    allok();    return false;   }  if (getObj("input4").value=="" || Trim(getObj("input4").value)=="")  {     getObj("sps4").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>請正確輸入您的E-Mail地址！</font>"    mon4=0;    allok();    return false;  } } //重要，AJAX檢測檢證碼 function GetResultjishu() { var maxid1; var oBao1 = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try {   oBao1 = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {   try {     oBao1 = new ActiveXObject("Microsoft.XMLHTTP");   } catch (e2) {     oBao1 = false;   } } @end @*/ if (!oBao1 && typeof XMLHttpRequest != 'undefined') {   oBao1 = new XMLHttpRequest(); } oBao1.open("POST","readseion.asp",false); oBao1.setRequestHeader("Content-Type","application/x-www-form-urlencoded") oBao1.send(); //服務(wù)器端處理返回的是經(jīng)過escape編碼的字符串. maxid1 = unescape(oBao1.responseText); getObj("mycode").innerHTML=maxid1; //document.getElementById("showf").innerHTML=maxid1; } //檢測驗證碼 function checkcode(){     GetResultjishu(); if (getObj("yanzheng").value=="" || Trim(getObj("yanzheng").value)=="")  {     getObj("sps5").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>請正確輸入驗證碼！</font>"    return false;  }else{     if (getObj("mycode").innerHTML==Trim(getObj("yanzheng").value))  {   getObj("sps5").innerHTML="<img src='https://www.jb51.netimages/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>驗證碼正確啦！</font>"  }else  {   getObj("sps5").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>請正確輸入驗證碼！</font>"     return false;  }  } } //用戶名檢測 function myuser(){ var pageId=getObj("input1").value; /* *--------------- GetResult() ----------------- * GetResult() * 功能:通過XMLHTTP發(fā)送請求,返回結(jié)果. *--------------- GetResult() ----------------- */ /* Create a new XMLHttpRequest object to talk to the Web server */ var oBao = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try {   oBao = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {   try {     oBao = new ActiveXObject("Microsoft.XMLHTTP");   } catch (e2) {     oBao = false;   } } @end @*/ if (!oBao && typeof XMLHttpRequest != 'undefined') {   oBao = new XMLHttpRequest(); } //特殊字符：+,%,&,=,?等的傳輸解決辦法.字符串先用escape編碼的. //Update:2004-6-1 12:22     var userInfoo = "pageid="+pageId;     oBao.open("POST","checkuser.asp",false);     oBao.setRequestHeader("Content-Type","application/x-www-form-urlencoded")     oBao.send(userInfoo); //服務(wù)器端處理返回的是經(jīng)過escape編碼的字符串. var strResult = unescape(oBao.responseText); //將字符串分開. if (strResult==getObj("input1").value){ getObj("sps1").innerHTML="<img src='https://www.jb51.netimages/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>不行啦，有重名啦Q！</font>"; mon1=0; allok(); return false; }else{ getObj("sps1").innerHTML="<img src='https://www.jb51.netimages/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>用戶名OK啦！可以進行下步啦！</font>"; mon1=1; allok(); return false; } } //修改驗證碼 function changecode(){     myc.location.href="tocod.asp"; } //發(fā)送扭鈕狀態(tài)檢測 function allok(){   if (mon1==1&&mon2==1&&mon3==1&&mon4==1&&mon5==1){ getObj("Submit").disabled=false; }else{ getObj("Submit").disabled=true; } } //復(fù)位 function resetall(){   for(var i=1;i<=4;i++){   getObj("input"+i).value="";   }   getObj("yanzheng").value="";   getObj("acctiveme").checked=false;   getObj("sps1").className="reg1";   getObj("sps1").innerHTML="3～20個合法字符(包括大小寫字母、數(shù)字、下劃線、中文)，一旦注冊成功用戶名不能修改。";   getObj("sps2").className="reg1";   getObj("sps2").innerHTML="密碼區(qū)分大小寫，4～20個合法字符組成，請盡量使用英文字母加數(shù)字或符號的組合密碼。";   getObj("sps3").className="reg1";   getObj("sps3").innerHTML="請再輸入一遍您上面輸入的密碼。";   getObj("sps4").className="reg1";   getObj("sps4").innerHTML="E-mail非常重要！這是我們與您聯(lián)系的首選方式，以及接收我們的服務(wù)和取回密碼的途徑，請務(wù)必填寫真實，并確認是您最常用的電子郵件。";   getObj("sps5").className="reg1";   getObj("sps5").innerHTML="請輸入您的驗證碼!";   getObj("checkuserme").disabled=true; mon1=0; mon2=0; mon3=0; mon4=0; mon5=0; allok(); } //有趣的功能，刷新頁面時調(diào)用些涵數(shù) function chefirst(){  if (getObj("input1").value!="" || getObj("input2").value!="" || getObj("input3").value!="" || getObj("input4").value!="" || getObj("yanzheng").value!=""){ checkloginname(); checkpassword(); checkreturnpass(); checkmyemail(); checkcode(); return false; }else{ return false; } } </script> </head> <body onload="return chefirst()"> <div   class="iwvjtn8m0"   id="mainbodytop"></div> <div   class="iwvjtn8m0"   id="loginclss"><form name="theForm" action="addusers.asp" method="post" onsubmit="return checkall()"> <p class="tishi"><font color="#0033CC"><b>女人沙龍注冊步驟</b></font>-<font color="#FF6600">注冊社區(qū)ID</font> >>  進入社區(qū)</p> <dl class="biao"> <dt><span>注冊登陸名：   <input name="loginname" type="text" id="input1" onfocus="showare(1)" onblur="return checkloginname()" /> </span><span id="iwvjtn8m0"    class="reg1" id="sps1">3～20個合法字符(包括大小寫字母、數(shù)字、下劃線、中文)，一旦注冊成功用戶名不能修改。</span> </dt> <dd>   <input type="image" id="checkuserme" src="images/checkname.jpg" onclick="return myuser()" name="Submit3" value="提交" disabled/>   </dd> <dd>接受相關(guān)協(xié)議：   <input name="acctiveme" type="radio" id="acctiveme" value="yes" onclick="chekme1()" />    接受   <input type="radio" name="acctiveme" id="acctiveme" onclick="chekme2()" value="no" />    不接受 <a href="readgeze.html" target="_blank" class="toplink">相關(guān)協(xié)議</a> </dd> <dt><span>注冊密碼：   <input name="password" type="text" id="input2" onfocus="showare(2)"  onblur="return checkpassword()"/> </span><span id="iwvjtn8m0"    class="reg1" id="sps2">密碼區(qū)分大小寫，4～20個合法字符組成，請盡量使用英文字母加數(shù)字或符號的組合密碼。</span> </dt> <dt><span>重復(fù)密碼：   <input name="returnpass" type="text" id="input3" onfocus="showare(3)"  onblur="return checkreturnpass()"/> </span><span id="iwvjtn8m0"    class="reg1" id="sps3">請再輸入一遍您上面輸入的密碼。</span> </dt> <dt><span>電子郵件：   <input name="myemail" type="text" id="input4" onfocus="showare(4)"  onblur="return checkmyemail()"/> </span><span id="iwvjtn8m0"    class="reg1" id="sps4">E-mail非常重要！這是我們與您聯(lián)系的首選方式，以及接收我們的服務(wù)和取回密碼的途徑，請務(wù)必填寫真實，并確認是您最常用的電子郵件。</span> </dt> <dd><span>驗 證 碼：   <input name="yanzheng" type="text" id="yanzheng"  onfocus="showare(5)" size="5" onblur="checkcode()" />  <iframe scrolling="no" id="myc" frameborder="0" marginheight="0" marginwidth="0" vspace="0" hspace="0" width="60" height="15" src="tocod.asp"></iframe>   <img src="https://www.jb51.netimages/changecode.gif" style="cursor:pointer " onclick="changecode()" width="37" height="16" /></span><span id="iwvjtn8m0"    class="reg1" id="sps5">請輸入您的驗證碼!</span><font id="mycode" style="display:none ">d</font> </dd> <dt style="text-align:center ">   <input type="submit" id="Submit" name="Submit" value=" 提 交 " disabled />   <input type="reset" name="Submit2" onclick="resetall()" value=" 重 置 " /> </dt> </dl> </form> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：javascript 復(fù)選框選擇/全選后特效

下一篇：設(shè)置和讀取cookie的javascript代碼