本地javascript（純天然代碼）驗證，本地驗證主要分2部分：
一、和用戶的表單交互
首先需要編寫用於表單交互的函數，該函數需要在頁面加載時加載，格式如下：window.onload=function (){}
接着用getElement的方法獲取相應的標簽在function函數里定義為全局變量。
然后在function內編寫這些變量的事件，用到的三大事件分別為：onfocus（獲取焦點事件）、onkeyup（鍵盤事件）、onblur（失去焦點事件）。
用法：以onfocus為例如下：
pwd.onfocus=function(){//變量pwd的獲取焦點事件
pwd_msg.style.display="block";
pwd_msg.innerHTML='<i class="ati"></i>6-16個字符，請使用字母加數字或符號的組合密碼，不能單獨使用字母、數字或符號。 ';
}
二、點擊提交按鈕是對表單的檢驗
主要用到onsumit（表單提交前）事件，用法如下：
<form method="post" action="aupload.php" enctype="multipart/form-data" onsubmit="return check()">
需要在function外單獨再編寫check函數。
三、完整源代碼及運行截圖獻上
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 驗證碼</title> <style type="text/css"> #header{ width:95%; height:100px; padding-left:5%; clear:both; border-bottom:#CCC dashed thin ;} #header img{width:80px; height:80px; float:left; border-radius:40px; margin-top:10px ;margin-bottom:10px; } #header h1{display:inline-block; margin-left:20px;} #main{ width:100%; height:auto;} body,div,dl,dd,ul,ol,li{ margin:0;padding:0; font:12px/1.5"宋體","Arial",color:#666;} body{background:url(uploads/0911454230045.png) no-repeat; background-size:700px,450px; background-position:50px 120px;} img{ border:none} input,select,img{ vertical-align:middle}/*有疑惑*/ lable{vertical-align:middle} form{ width:450px; height:500px; margin-top:130px; margin-right:80px;float:right; } form div{ overflow:hidden; clear:both} form div label{float:left; clear:both;} form div label .text{ width:152px; height:26px; padding:0 2px; border:1px solid #ccc } form div label b{ font-weight:normal; font-size:12px; color:#ccc; visibility:hidden}/*有疑惑*/ form div em{ display:inline-block; font-family:12px; text-align:center;color:#fff; vertical-align:middle; font-style:normal; width:53px;height:15px; line-height:15px; background-color:#ffd099} form div .active{ background-color:#ff6600} div span{ display:inline-block; width:80px; text-align:right} .submitBtn{width:135px; height:33px; background:url(); color:red; margin:20px 0 0 80px;}/*需完善*/ .changeimg{ width:22px; height:22px; display:inline-block; vertical-align:middle;background:url(uploads/img1.png) no-repeat 5px 1px}/*需完善*/ .msg{ line-height:14px; color:#999; float:left; margin-left:5px;margin-top:2px; display:none; } .msg i{ display:inline-block; vertical-align:middle; width:25px; height:20px; background:url(uploads/img1_1.png) no-repeat} /*.msg .ati{ background:0 -71px} .msg .err{background:0 -39px} .msg .ok{background:0 -99px} */ </style> <script type="text/javascript"> function getLength(str){ return str.replace(/[^\x00-xff]/g,"xx").length;//使用替換函數將正則值替換為xx } function findStr(str,n){//檢測是否密碼為連續的相同字符 var tmp=0; for(var i=0;i<str.length;i++){ if(str.charAt(i)==n){ tmp++; } } return tmp; } var code = ""; //驗證碼 //生成驗證碼 function createCode(){ code = "";//重新初始化驗證碼 var num = 4; //驗證碼位數 var codeList = new Array(1,2,3,4,5,6,7,8,9,0,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'); //驗證碼內容 //循環獲取每一位驗證碼 for(var i = 0; i < num; i++){ //隨機數 * 驗證碼候選元素數量 = 候選元素數組下標 code += codeList[Math.floor(Math.random() * codeList.length)]; } document.getElementById("txtCode").value = code; } window.onload=function (){ createCode(); //加載驗證碼 var alnput=document.getElementsByTagName('input'); var oName=alnput[0]; var pwd=alnput[1]; var pwd2=alnput[2]; var ma1=alnput[3]; var ma2=alnput[4]; var aP=document.getElementsByTagName('p');//ap中的P為大寫 var name_msg=aP[0]; var pwd_msg=aP[1]; var pwd2_msg=aP[2]; var ma=aP[3]; var count=document.getElementById('count'); var aEm=document.getElementsByTagName('em'); var name_length=0; //1.數字、字母(不分大小寫)、漢字、下划線 //2. 5-25字符，推薦使用中文 //\u4e00-\u9fa5(這是漢字的范圍) var re=/[^\w\u4e00-\u9fa5]/g; var re_n=/[^\d]/g; var re_t=/[^a-zA-Z]/g; //用戶名 oName.onfocus=function(){ name_msg.style.display="block"; name_msg.innerHTML='<i class="ati"></i>5-25個字符'; }//獲取焦點事件 oName.onkeyup=function(){ count.style.visibility="visible";//有疑惑 name_length=getLength(this.value); count.innerHTML=name_length+"個字符"; if(name_length==0){ count.style.visibility="hidden"; } }//鍵盤事件 oName.onblur=function(){ //含有非法字符 var re=/[^\w\u4e00-\u9fa5]/g; if(re.test(this.value)){ name_msg.innerHTML='<i class="err"></i>含有非法字符'; } //不能為空 else if(this.value==""){ name_msg.innerHTML='<i class="err"></i>不能為空'; } //長度超過25個字符 else if(name_length>25){ name_msg.innerHTML='<i class="err"></i>長度超過25個字符'; } //長度少於6個字符 else if(name_length<6){ name_msg.innerHTML='<i class="err"></i>長度少於6個字符'; } //ok else{ name_msg.innerHTML='<i class="ok"></i>ok'; } }//失去焦點事件 //密碼 pwd.onfocus=function(){ pwd_msg.style.display="block"; pwd_msg.innerHTML='<i class="ati"></i>6-16個字符，請使用字母加數字或符號的組合密碼，不能單獨使用字母、數字或符號。'; } pwd.onkeyup=function(){ //大於5字符"中" if(this.value.length>5){ aEm[1].className="active"; pwd2.removeAttribute("disabled");//移除禁用屬性 pwd2_msg.style.display="block"; } else{ aEm[1].className=""; pwd2_msg.style.display="none"; pwd2.disabled="true";//重新設置為禁用狀態 } //大於10個字符"強" if(this.value.length>10){ aEm[2].className="active"; pwd2_msg.style.display="block"; } else{ aEm[2].className=""; } } pwd.onblur=function(){ var m=findStr(pwd.value,pwd.value[0]); //不能為空 if(this.value==""){ pwd_msg.innerHTML='<i class="err"></i>不能為空'; } //不能用相同字符 else if(m==this.value.length){ pwd_msg.innerHTML='<i class="err"></i>不能使用相同字符'; } //長度應為6-16個字符 else if(this.value.length<6||this.value.length>16){ pwd_msg.innerHTML='<i class="err"></i>長度應為6-16個字符'; } //不能全為數字 else if(!re_n.test(this.value)){ pwd_msg.innerHTML='<i class="err"></i>不能全為數字'; } //不能全為字母 else if(!re_t.test(this.value)){ pwd_msg.innerHTML='<i class="err"></i>不能全為字母'; } //ok else{ pwd_msg.innerHTML='<i class="err"></i>ok'; } } //確認密碼 pwd2.onblur=function(){ if(this.value!=pwd.value){ pwd2_msg.innerHTML='<i class="err"></i>兩次輸入密碼不一致！'; } else{ pwd2_msg.innerHTML='<i class="err"></i>ok！'; } } //驗證碼 ma1.onblur=function(){ if(ma1.value==code){ ma.style.display="block"; ma.innerHTML='<i class="ati"></i>ok'; } else{ ma.style.display="block"; ma.innerHTML='<i class="ati"></i>驗證碼輸入有誤'; code = ""; createCode(); //生成新的驗證碼 } } } //下面為check函數進行提交前的驗證 function check(){ var alnput=document.getElementsByTagName('input'); var oName=alnput[0]; var pwd=alnput[1]; var pwd2=alnput[2]; var ma1=alnput[3]; var ma2=alnput[4]; var subt=alnput[5]; var aP=document.getElementsByTagName('p');//ap中的P為大寫 var name_msg=aP[0]; var pwd_msg=aP[1]; var pwd2_msg=aP[2]; var count=document.getElementById('count'); var aEm=document.getElementsByTagName('em'); var name_length=0; //1.數字、字母(不分大小寫)、漢字、下划線 //2. 5-25字符，推薦使用中文 //\u4e00-\u9fa5(這是漢字的范圍) var re=/[^\w\u4e00-\u9fa5]/g; var re_n=/[^\d]/g; var re_t=/[^a-zA-Z]/g; var k=1; var re=/[^\w\u4e00-\u9fa5]/g; //用戶名 name_length=getLength(oName.value); if (oName.value==""){ name_msg.style.display="block"; name_msg.innerHTML='<i class="ati"></i>請輸入用戶名'; k=k+1; } else if(re.test(oName.value)){ name_msg.innerHTML='<i class="err"></i>含有非法字符'; k=k+1; } //長度超過25個字符 else if(name_length>25){ //name_msg.innerHTML='<i class="err"></i>長度超過25個字符'; k=k+1; } //長度少於6個字符 else if(name_length<6){ // name_msg.innerHTML='<i class="err"></i>長度少於6個字符'; k=k+1; } else{ k=k+0; } //密碼 var m=findStr(pwd.value,pwd.value[0]); //不能為空 if(pwd.value==""){ pwd_msg.style.display="block"; // pwd_msg.innerHTML='<i class="ati"></i>不能為空'; k=k+1; } //不能用相同字符 else if(m==pwd.value.length){ k=k+1; } //長度應為6-16個字符 else if(pwd.value.length<6||pwd.value.length>16){ k=k+1; } //不能全為數字 else if(!re_n.test(pwd.value)){ k=k+1; } //不能全為字母 else if(!re_t.test(pwd.value)){ k=k+1; } //ok else{ k=k+0; } //確認密碼 if(pwd2.value!=pwd.value){ pwd2_msg.innerHTML='<i class="err"></i>兩次輸入密碼不一致！'; k=k+1; } else{ k=k+0; } //檢驗驗證碼輸入是否有誤 if(ma1.value!=ma2.value){ k=k+1; } else{ k=k+0; } //下面的操作計算check函數的返回值 if(k!=1){ return false; } else{ aEm[1].className=""; subt.value='正在提交'; subt.disabled='true'; return true; } } </script> </head> <body> <div id="header"> <img src="uploads/a1.jpg" /><h1>web學園</h1> </div> <div id="main"> <form method="post" action="aupload.php" enctype="multipart/form-data" onsubmit="return check()"> <div> <label> <span>會員名：</span><input type="text" class="text"/></label> <p class="msg"><i class="ati"></i>5-25個字符，一個漢字為2個字符，推薦使用中文會員名</p> </div> <div> <label> <span></span><b id="count">0個字符</b></label> </div> <div> <label><span>登錄密碼：</span><input type="password" class="text"/></label> <p class="msg" style="width:200px; height:50px;"><i class="err"></i>5-25個字符，一個漢字為2個字符，推薦使用中文會員名</p> </div> <div style="margin:3px 0 10px 0"> <label><span></span><em class="active">弱</em><em>中</em><em>強</em></label> </div> <div style="margin-bottom:20px;"> <label><span>確認密碼：</span><input type="password" class="text" disabled=""/></label> <p class="msg"><i class="ati"></i>請在輸入一次</p> </div> <div> <label><span>驗證碼：</span><input type="text" style="width:50px;"/><input id="txtCode" type="text" style=" width:60px;" readonly /><a href="#" class="changeimg" title="重新獲取驗證碼" onClick="createCode()"></a></label> <p class="msg"><i class="ati"></i>驗證碼輸入有誤</p> </div> <div> <input class="submitBtn" type="submit" value="同意協議並注冊" onclick=""/> </div> </form> </div> </body> </html>