기본 버전
온라인 액세스에 대한 일상적인 경험을 판단하면, 검증 코드는 일반적으로 숫자와 문자로 구성된 4 자리입니다.
그러면 포스터는 모든 사람이 JavaScript를 단계별로 사용하여 확인 코드 스크립트를 만듭니다!
먼저 모든 사람이 이해할 수 있도록 완제품을 제공하십시오.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <style> #securitycode {background-color : #008000; 너비 : 70px; 높이 : 30px; Font-Family : 'Kaiti', Serif; 글꼴 크기 : 20px; 색상 : 흰색; } </style> <script language = "javaScript"type = "text/javaScript"> function createCode () {var code = new Array (0,1,2,3,4,5,6,8,8,9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'z'); var codenumber; SecurityCode = ""; // 글로벌 변수는 (var i = 0; i <4; i ++)에 대한 후속 검증을 용이하게합니다 {codenumber = math.floor (math.random ()*36); SecurityCode+= 코드 [CodEnumber]; } document.getElementById ( "SecurityCode"). value = securitycode; } function verife () {var EngerCode = Document.GetElementById ( "Engcode"). 값; if (eNTERCODE.TOUPPERCASE () == securityCode) {alert ( "입력 올바른, 통과 확인!"); } else {EnterCode.Value = ""; createCode (); }} </script> <title> jizhen tan </title> </head> <body onload = "checkCookie ()"> <입력 유형 = "text"id = "entercode"> <input type = "ind ="id = "inclick"onclick = "createCode ()"> 명확하게 </a> <br/> <input type = "button"style = "back1. 4 자리 검증 코드이므로 아이디어를 열어야합니다. 먼저, 문자와 숫자를 저장하려면 배열이 필요합니다.
var 코드 = 새로운 배열 (0,1,2,3,4,5,6,7,8,9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'z');
2. 그런 다음 배열에 요소를 무작위로 표시하도록해야합니다. 여기서 우리는 숫자를 무작위로 표시하기 위해 CodeNumber 변수를 만듭니다. 그러나 우리가 필요로하는 것은 4 비트 검증 코드이며, 이제 배열의 요소는 모두 단일입니다. 어떻게해야합니까? 단순한! 배열에 요소를 저장할 SecurityCode 변수를 작성하겠습니다. 코드는 다음과 같습니다.
var codenumber; SecurityCode = ""; // 글로벌 변수는 (var i = 0; i <4; i ++)에 대한 후속 검증을 용이하게합니다 {codenumber = math.floor (math.random ()*36); SecurityCode+= 코드 [CodEnumber]; }현재 보안 번호 변수는 4 비트 임의의 검증 코드를 저장한다는 것을 알 수 있습니다.
3. 좋아, 두 가지 간단한 단계 후에, 우리는 4 자리 검증 코드를 얻었습니다. 우리는 그것을 CreateCode 함수에 넣습니다.
함수 createCode () {var code = 새로운 배열 (0,1,2,3,4,5,6,7,8,9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'z'); var codenumber; SecurityCode = ""; // 글로벌 변수는 (var i = 0; i <4; i ++)에 대한 후속 검증을 용이하게합니다 {codenumber = math.floor (math.random ()*36); SecurityCode+= 코드 [CodEnumber]; } document.getElementById ( "SecurityCode"). value = securitycode; }4. 다음으로 검증 메커니즘을 만듭니다.
함수 verife () {var EntsCode = document.getElementById ( "Engcode"). 값; if (eNTERCODE.TOUPPERCASE () == securityCode) {alert ( "입력은 정확하고, 통과 확인!"); } else {EnterCode.Value = ""; createCode (); }}5. 작은 수정에 따라 검증 코드 :
<Style> #SecurityCode {Background-Color : #008000; 너비 : 70px; 높이 : 30px; Font-Family : 'Kaiti', Serif; 글꼴 크기 : 20px; 색상 : 흰색; } </style>고급 : 로봇을 추가로 정지하기위한 고급 팁
내가 연락 한 대부분의 프로젝트에서 검증 코드는 항상 백엔드에 의해 수행되었습니다. 지난 이틀 동안 검증 코드가 필요한 페이지가있었습니다. 나는 즉시 백그라운드 구현에 대해 생각했지만 갑자기 대부분의 프로젝트에 높은 보안 요구 사항이없고 로봇을 차단하는 데 약간의 기술이 필요하다고 생각했기 때문에 프론트 엔드를 사용하여 검증 코드를 작성했습니다. 그리고 CSS3의 변환 속성에서 회전을 사용하여 회전을 설정 한 다음 무작위로 일부 간섭선을 가져오고 마지막으로 모든 DOM 노드 위에 불투명도 = 0 DIV를 추가하기 위해 프론트 엔드 검증 코드가 나옵니다.
vcode 코드 :
(function () {var randstr = function (length) {var key = {str : [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'o', 'p', 'q', 'r', 's', 's', 's', 's', ' s ','t ','x ','u ','v ','y ','z ','w ','n ','0 ','1 ','2 ','3 ','4 ','5 ','6 ','7 ','8 ','9 ','9 ' ] function(len){ var _this = this; var l = len || 10; var str = ''; for(var i = 0 ; i<l ; i++){ str += _this.randStr(); } return str; } }; length = length ? length : 10; return key.create(length); }; var randint = function(n,m){ var c = m-n+1; var num = Math.random() * c + n; return Math.floor(num); }; var vCode = function(dom, options){ this.codeDoms = []; this.lineDoms = []; this.initOptions(options); this.dom = dom; this.init(); this.addEvent(); this.update(); this.mask(); }; vCode.prototype.init = function (this.dom.style.scursor = this.dom.title); this.clientHeight. "z-index : 999999". _this.call (_this); "#aa0000", "#ffbb00"; bgcolor = "#fff"; "#888800", "#008888"; 옵션 [i]; 이 function (this.code.length; i ++) {this.codecode (this.code [i], i); dom.style.csstext = [ "font -size :" + randint (this.options.fontsizemin, this.options.fontsizemax) + "px", "color :" + this.options.colors [0, this.options.colors.length -1)], "위치 : 절대" this.uw-10) + "px", "top :" + randint (0, this.h-30) + "px", "transform : rotate (" + randint (-30, 30) + "deg)", "-ms-transform : rotate (" + randint (-30, 30) + "deg)", "-moz-transform :" + randint (-30) + "deg)", "-webkit-transform : 회전 (" + randint (-30, 30) + "deg)", "-o-transform : rotate (" + randint (-30, 30) + "deg)", "font-family :" + this.options.fonts [randint (0, this.options.fonts.length-1)], "font-weight :" + randint (400, 900). ]. ";" 절대 ", 불투명도 :" + randint (3, 8) / 10, "width :" + randint (this.options.linewidthmin, this.options.linewidthmax) + "px", "height :" + randint.lineHeightmin, this.options.lineHeightMax) + "px", " + this." this.options.linecolors.length-1)], "왼쪽 :" + randint (0, this.w-20) + "px", "top :" + randint (0, this.h) + "px", "transform : rotate (" + randint (-30, 30) + "deg)", "-ms-transform :" + randint (-30, 30) + ")", "-moz-transform : 회전 (" + randint (-30, 30) + "deg)", "-webkit-transform : rotate (" + randint (-30, 30) + "deg)", "-o-transform :" + randint ( " + randint (-30, 30) +"deg) ","font-family : " + this.options.fonts (0, this.font. 1), " + randint (400, 900).용법:
// 컨테이너는 검증 코드의 DOM 노드 var code = new vcode (컨테이너)입니다. // 올바른지 확인 // inputCode는 user.verify (inputCode)가 입력 한 확인 코드입니다. // true 또는 false를 반환합니다