驗證碼的生成（前端）
阿新 • • 發佈：2017-12-11
load img als val 聲明 .get round tex color
demo
<body onload="changeImg()"> <div class="main_bar"> <div id="login_form" class="login_form"> <div class="title"></div> <form action="login.html"> <div id="form_widgt"> <input type="text" name="name" class="name" placeholder="請輸入賬號""><br> <input type="password" name="pwd" class="pwd" placeholder="請輸入密碼"><br> <p class="yzm"><input type="text" name="code" id="codeInput" class="code" placeholder="驗證碼"> <span id="code" class="code_pic" title="看不清，換一張"></span></p> <p class="errorTips" id="errorTips"></p> <a href="javascript:;" name="sbm" class="sbm_btn" onclick="return check()">登錄</a> </div> </form> <div class="re_pwd"><a href="">忘記密碼了</a></div> </div> </div> <script type="text/javascript"> // 聲明一個變量用於存儲生成的驗證碼 document.getElementById(‘code‘).onclick = changeImg; function changeImg(){ // 驗證碼組成庫 var arrays=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‘ ); // 重新初始化驗證碼 code =‘‘; // 隨機從數組中獲取四個元素組成驗證碼 for(var i = 0; i<4; i++){ // 隨機獲取一個數組的下標 var r = parseInt(Math.random()*arrays.length); code += arrays[r]; } // 驗證碼寫入span區域 document.getElementById(‘code‘).innerHTML = code; } // 驗證驗證碼 function check(){ var error; // 獲取用戶輸入的驗證碼 var codeInput = document.getElementById(‘codeInput‘).value; if(codeInput.toLowerCase() == code.toLowerCase()){ // console.log(‘123‘); return true; }else{ error = ‘驗證碼錯誤，重新輸入‘; document.getElementById(‘errorTips‘).innerHTML = error; return false; } } </script> </body>
驗證碼的生成（前端）