基本バージョン
オンラインアクセスでの毎日の経験から判断すると、検証コードは通常、数字と文字で構成される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> <スクリプト言語= "javascript" type = "text/javascript"> function createcode（）{var code = new Array（0,1,2,4,5,6,7,8,9、 ''、 'b'、 'c' '、' d '、' e '、' f '、' g '' '' '、' h '、' '、j'、 'k'、 'l'、 'm'、 'o'、 'p'、 'q'、 'r'、 's'、 't'、 'u' '' '、' w ' var Codenumber; SecurityCode = ""; //グローバル変数、（var i = 0; i <4; i ++）{codenumber = math.floor（math.random（）*36）; SecurityCode+= code [codenumber]; } document.getElementByID（ "SecurityCode"）。value = securityCode; } function verify（）{var entercode = document.getElementById（ "enterCode"）。value; if（entercode.touppercase（）== securitycode）{alert（ "input recort、pass verification！"）; } else {entercode.value = ""; CreateCode（）; }} </script> <title> jizhen tan </title> </head> <body onload = "checkcookie（）"> <input type = "text" id = "entercode"> <br/> <入力タイプ= "ボタン" id "id" onclick = "createcode（）"> <a createcode <入力型= "button" style = "background-color：＃0099ff; font-size：20px;" value = "verify" onclick = "verify（）"> </body> </html>1. 4桁の検証コードであるため、私たちのアイデアを開く必要があります。まず、文字と番号を保存するための配列が必要です。
var code = new Array（0,1,2,3,4,6,7,8,9、 ''、 'b'、 'c' '、' d '、' e '、' f '、' g '' '' '、' h '、' '、j'、 'k'、 'l'、 'm'、 'o'、 'p'、 'q'、 'r'、 's'、 't'、 'u' '' '、' w '
2。その後、配列内の要素をランダムに表示する必要があります。ここでは、数字をランダムに表示するためにコードナンバー変数を作成しますが、必要なのは4ビット検証コードであり、アレイ内の要素はすべて単一です。どうすればよいですか？単純！配列に要素を保存するセキュリティコード変数を作成しましょう。コードは次のとおりです。
var Codenumber; SecurityCode = ""; //グローバル変数、（var i = 0; i <4; i ++）{codenumber = math.floor（math.random（）*36）; SecurityCode+= code [codenumber]; }この時点で、SecurityNumber変数が4ビットのランダム検証コードを保存していることがわかります。
3.さて、2つの簡単な手順の後、4桁の検証コードを取得しました。 CreateCode関数に配置します。
function createcode（）{var code = new Array（0,1,2,3,4,6,7,8,9、 ''、 'b'、 'c' '、' d '、' e '、' f '、' g '' '' '、' h '、' '、j'、 'k'、 'l'、 'm'、 'o'、 'p'、 'q'、 'r'、 's'、 't'、 'u' '' '、' w ' var Codenumber; SecurityCode = ""; //グローバル変数、（var i = 0; i <4; i ++）{codenumber = math.floor（math.random（）*36）; SecurityCode+= code [codenumber]; } document.getElementByID（ "SecurityCode"）。value = securityCode; }4.次に、検証メカニズムを作成します。
function verify（）{var entercode = document.getElementById（ "enterCode"）。value; if（entercode.touppercase（）== securitycode）{alert（ "入力は正しい、パス検証！"）; } else {entercode.value = ""; CreateCode（）; }}5。小さな変更の下で、検証コード：
<style> #securitycode {background-color：＃008000;幅：70px;高さ：30px; font-family： 'kaiti'、serif;フォントサイズ：20px;色：白; } </style>Advanced：ロボットをさらに停止するための高度なヒント
私が接触したほとんどのプロジェクトでは、検証コードは常にバックエンドによって行われてきました。過去2日間で、たまたま検証コードが必要なページがありました。私はすぐにバックグラウンドの実装について考えましたが、突然、ほとんどのプロジェクトには高いセキュリティ要件がなく、ロボットをブロックするためにいくつかのスキルが必要だと思ったので、フロントエンドを使用して検証コードを書きました。 CSS3の変換プロパティの回転を使用して回転を設定し、ランダムに干渉線を取得し、最後に、すべてのDOMノードの上に不透明度= 0 divの層を追加するために、フロントエンド検証コードが出てきます。
vcodeコード：
（function（）{var randstr = function（length）{var key = {str：[[ 'A'、 'b'、 'c' '、' d '、' e '、' f '、' g ''、 'h'、 ''、 '' '、' k '、' l '、' m '、' o '、' p '、' q '、' r '、' s '' ' s '、' t '、' x '、' u '、' v '、y'、 'z'、 'w'、 'n'、 '0'、 '1'、 '2'、 '3'、 '4'、 '5'、 '6'、 '7'、 '8、' 9 '、' 9 ' ]、n、m）{var num = c + n; 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 =数学（）num（dom）; vcode.prototype.init = function {this.dom.dome.style.cursor = "pointer =" this.dom.dom.clientheight; 「絶対」、「ポインター」、「Z-Index：999999」。 function（）{this.call.protoptions = function {this.len = 4; 「＃aa0000」、ffbb00 "]; 「＃888800」、lineheightmins = 3 = options [i]; this.remove.createcode（）; vcode.prototype.draw = function {this.codedoms = []; document.createelement（ "span"）; dom.style.csstext = [" + randint（this.options.fontsizemin、this.options.fontsizemax）、" randint（this.uw * index、this.uw * index + this.uw-10） + "px"、 " + randint（0、this.h-30） +" px "、" transfate：rotate（ " + randint（-30、30） +" deg） randint（-30、30） + "deg）、" -webkit-transform：rotate（ " + randint（-30、30） +" deg） "、" -o-transform：rotate（ " + randint（-30、30） +" deg）、 "font-family：" + this.options.fonts [randint（this-options.lengtions.lent.font.font.font. 「font-weight（400、900） document.createelement（ "div"）; dom.style.csstext = ["position：" + randint（3、8） / 10、 " + randint（this.options.linewidthmin、this.options.linewidthmax） +" px " this.options.lineheightmax） + "px"、 "background：" + this.options.linecolors [randint（this.options.linecolors.linecolors.linecolors.lenting -1）]、 " + randint（0、this.w -20） +" px "、" "top：" + randint（0） + "px" "deg）、" -ms-transform：rotate（ " + randint（-30、30） +" deg） "、" -moz-transform：rotate（ " + randint（-30） +" deg） "、" -webkit-transform：rotate（ " + randint（-30、30） +" deg） 「font.options.fonts（this.options.font-weight： " + randint）。使用法：
//コンテナは、検証コードのdomノードvar code = new vcode（container）; //それが正しいかどうかを確認します// trueまたはfalseを返します