案例字母數字驗證碼並驗證驗證碼
阿新 • • 發佈：2018-11-12
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""> <table width="449" height="530" border="1" align='center'> <tr> <td colspan="2" align="center">使用者名稱註冊</td> </tr> <tr> <td width="116" align="right">姓名：</td> <td width="323"><label> <input type="text" name="" id="name" /> </label></td> </tr> <tr> <td width="116" align="right">性別：</td> <td width="323"><label> <input type="radio" name="sex" id="" />男 <input type="radio" name="sex" id="" />女 </label></td> </tr> <tr> <td align="right">年齡：</td> <td><label> <input type="text" name="" id="age" /> </label></td> </tr> <tr> <td align="right">密碼：</td> <td><label> <input type="password" name="" id="pwd" /> </label></td> </tr> <tr> <td align="right">確認密碼：</td> <td><label> <input type="password" name="" id="qpwd" /> </label></td> </tr> <tr> <td align="right">手機：</td> <td><label> <input type="text" name="" id="tel" /> </label></td> </tr> <tr> <td align="right">QQ:</td> <td><label> <input type="text" name="" id="qq" /> </label></td> </tr> <tr> <td align="right">郵箱：</td> <td><label> <input type="text" name="" id="email" /> </label></td> </tr> <tr> <td align="right">郵編：</td> <td><label> <input type="text" name="" id="eml" /> </label></td> </tr> <tr> <td align="right">身份證：</td> <td><label> <input type="text" name="" id="sname" /> </label></td> </tr> <tr> <td align="right">驗證碼：</td> <td><label> <input type="text" id="inp"/> <span id="checkCode" style=" background:url(images/1.jpg) -10px -15px;width:80px;font-style: italic; height: 20px;border: 1px solid black;display: inline-block;"></span> <a href="javascript:;" id="btn1">看不清</a> </label></td> </tr> <tr> <td align="right">愛好：</td> <td><label> <input type="checkbox" name="a" id="c1"> 足球 <input type="checkbox" name="a" id="c2"> 籃球 <input type="checkbox" name="a" id="c3"> 排球 <input type="checkbox" name="a" id="c4"> 網球 </label></td> </tr> <tr> <td height="36" colspan="2" align="center"><label> <input type="submit" value="註冊" id="btn2"/> </label></td> </tr> </table> </form> </body> </html> <script src="public.js"></script> <script type="text/javascript"> //由 字母 或 數字組成的驗證碼 // 從 48--122 之間 ，隨機獲取一個整數 ， // 如果 這個隨機整數在 58--64 或 91--96之間，說明不是數字或字母， 就重新抽取一個新的code值 // 如果這個隨機正則 不在58--64 或 91--96之間，說明是數字或字母，轉成對應字元 進行字串拼接 var inp = document.getElementById("inp"); var checkCode = document.getElementById("checkCode"); var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); checkCode.innerHTML = getYZM(6); btn1.onclick = function() { checkCode.innerHTML = getYZM(6); } btn2.onclick = function() { if (inp.value <= 0) { alert("請輸入驗證碼"); } else if (inp.value != checkCode.innerHTML) { alert("輸入錯誤，請重新輸入"); checkCode.innerHTML = getYZM(6); } else { alert("ok"); } } </script>
public.js
//獲取id function $id(id){ return document.getElementById(id); } //獲取某個範圍之間的隨機整數 function getRand(startNum,endNum){ return parseInt(Math.random()*(endNum-startNum+1) + startNum); } //隨機獲取六位十六進位制顏色值 function getRandColor(){ var colorCh = "0123456789abcdef"; var str = "#"; for (var i = 0; i < 6; i++) { var index = getRand(0,15); str += colorCh.charAt(index); } console.log(str); return str; } //隨機獲取num位數字驗證碼 function getYZM(num){ var yzm = ""; // Ad76 //var ch = String.fromCharCode(iii); for (var i = 0; i < num; i++) { var randAS = getRand(48,122); if((randAS >= 48 && randAS <= 57) || (randAS >= 65 && randAS <= 90) || (randAS >= 97 && randAS <= 122) ){ var ch = String.fromCharCode(randAS); yzm += ch; }else{ i--; } } return yzm } //獲取這種格式的日期：2018年X月X日 00:00:00 星期X function dateToString(date){ //2018年X月X日 00:00:00 星期X // y/m/d h:M:s var week = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"] var dateStr = ""; var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); var w = date.getDay(); var h = date.getHours(); var M = date.getMinutes(); var s = date.getSeconds(); dateStr += y+"年"+getDB(m)+"月"+getDB(d)+"日" dateStr += " " + getDB(h) + ":" + getDB(M) + ":" + getDB(s); dateStr += " " + week[w]; return dateStr; } function getDB(num){ return num < 10 ? "0" + num : num; } //獲取兩個時間的時間差，返回是一個秒數。 function getTimeDif(startTime,endTime){ return (endTime.getTime() - startTime.getTime())/1000; }