ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用して検証コードを取得する効果を実現する方法
JavaScriptを使用して検証コードを取得する効果を実現する方法
- yuliaオリジナル
- 2018-10-17 10:33:139426ブラウズ
Web サイトを閲覧しているときに、ほとんどすべての Web サイトでログイン時に確認コードの確認が必要であることに気づきましたか? JS を使用して確認コードを取得する方法をご存知ですか?この記事では、JS を使用して検証コードを記述する方法について説明し、JS で検証コードを取得するためのコードを共有します。これには一定の参考値があり、興味のある友人はそれを参照できます。
JS を使用して検証コードを取得したい場合は、random()、if 関数、for ループなど、JavaScript に関する多くの知識を使用する必要があります。よくわからない場合は、 PHP 中国語 Web サイトの関連記事を参照するか、JavaScript ビデオ チュートリアル にアクセスしてください。
JS を使用して検証コードを取得する簡単なコードを作成しました (CSS スタイルを設定するだけで、JavaScript 部分に注目します)。具体的なコードは次のとおりです。
HTML 部分:
<body onload='createCode()'>
<div>验证码：
<input type = "text" id = "input"/>
<input type="button" id="code" onclick="createCode()" style="width:60px" title='点击更换验证码' /></br>
<input type = "button" value = "验证" onclick = "validate()"/>
</div>
</body>CSS 部分:
#code{
font-family:Arial,宋体;
font-style:italic;
color:green;
border:0;
padding:5px 10px;
letter-spacing:3px;
font-weight:bolder;
}JavaScript 部分:
var code ; //在全局定义验证码
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,'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');//随机数
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("请输入验证码！"); //则弹出请输入验证码
}else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
alert("验证码输入错误!"); //则弹出验证码输入错误
createCode();//刷新验证码
document.getElementById("input").value = "";//清空文本框
}else { //输入正确时
alert("验证通过");
}
}JavaScript が検証コードを取得する具体的な手順は、コード内で詳しく説明されています。コメントで説明するため、ここでは繰り返しません。検証コードの効果は次の図に示されています。
上記は、検証コードを取得するための JS 実装の具体的な手順を詳しく説明しています。このコードはプロジェクトでよく使用されます。この記事が役立つことを願っています。
【おすすめ関連チュートリアル】
1. JavaScript 中国語リファレンス マニュアル
2. JavaScript グラフィック チュートリアルブートストラップ チュートリアル
以上がJavaScriptを使用して検証コードを取得する効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。