JavaScript를 이용한 인증코드 기능 구현 예시에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript를 이용한 인증코드 기능 구현 예시에 대한 자세한 설명

零下一度

풀어 주다： 2017-04-21 09:56:32

원래의

1501명이 탐색했습니다.

본 글에서는 자바스크립트 기반의 인증코드 기능 구현 관련 내용을 주로 소개합니다

본 글의 예시에서는 참고용으로 자바스크립트로 인증코드를 구현하는 구체적인 코드를 공유하고 있습니다.

1. 간단한 예
새 test.html

<!DOCTYPE html> 
<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>  
  <title>验证码</title>   
  <script src = "checkCode.js">  </script>  
</head>  
<body>  
  <p>  
    <input type = "text" id = "input"/>  
    <input type = "button" id="code" onclick="createCode()"/>  
    <input type = "button" value = "验证" onclick = "validate()"/>  
  </p>  
</body>  
</html>

로그인 후 복사

새 checkCode.js

var code ; //在全局定义验证码   
 
window.onload = function createCode(){  
   code = "";   
   var codeLength = 4;//验证码的长度  
   var checkCode = document.getElementById("code");   
   var random = new Array(0,1,2,3,4,5,6,7,8,9,&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;,&#39;E&#39;,&#39;F&#39;,&#39;G&#39;,&#39;H&#39;,&#39;I&#39;,&#39;J&#39;,&#39;K&#39;,&#39;L&#39;,&#39;M&#39;,&#39;N&#39;,&#39;O&#39;,&#39;P&#39;,&#39;Q&#39;,&#39;R&#39;,  
   &#39;S&#39;,&#39;T&#39;,&#39;U&#39;,&#39;V&#39;,&#39;W&#39;,&#39;X&#39;,&#39;Y&#39;,&#39;Z&#39;);//随机数  
   for(var i = 0; i < codeLength; i++) {//循环操作  
    var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
    code += random[index];//根据索引取得随机数加到code上  
  }  
  checkCode.value = code;//把code值赋给验证码  
}  
//校验验证码  
function validate(){  
  var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写     
  if(inputCode.length <= 0) { //若输入的验证码长度为0  
    alert("Empty Code!"); //则弹出请输入验证码  
  }      
  else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
    alert("Error Code"); //则弹出验证码输入错误  
    createCode();//刷新验证码  
    document.getElementById("input").value = "";//清空文本框  
  }      
  else { //输入正确时  
    alert("OK"); //弹出^-^  
  }        
}

로그인 후 복사

2. 클릭해도 이동하지 않음 코드:

잘 안 보이시나요?

위 내용은 JavaScript를 이용한 인증코드 기능 구현 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!