javascript - 比较数组图像和值，如果可以提交表单

Question

直播-http://www.arif-khan.net/other/cap/cap.html

我想用 Javascript 制作一个简单的验证码。 Aweber 不支持验证码，因此我尝试添加自己的验证码，我创建了 10 个示例图像，然后将其放入数组中。 如果图像代码和表单字段值匹配，则将提交表单，否则显示警报。

问题是我无法比较值(value)。知道如何解决这个问题。 我知道，有一个问题 - if (text.value == "random_text[random_number]"){

我的代码-

<script type="text/javascript">
 var total_images = 10;
 var random_number = Math.floor((Math.random()*total_images));
 var random_img = new Array();
 var random_text = [];

 random_img[0] = '<img src="images/captcha/cap1.png" alt="CAPTCHA" style="vertical-align:bottom;margin-top: 1px;" />';
 random_text[0] = 'IG161';
 random_img[1] = '<img src="images/captcha/cap2.png" alt="CAPTCHA" style="vertical-align:bottom;margin-top: 1px;" />';
 random_text[1] = '3NFNT';
 random_img[2] = '<img src="images/captcha/cap3.png" alt="CAPTCHA" style="vertical-align:bottom;margin-top: 1px;" />';
 random_text[2] = '6QW5P';
 random_img[3] = '<img src="images/captcha/cap4.png" alt="CAPTCHA" style="vertical-align:bottom;margin-top: 1px;" />';
 random_text[3] = 'UOEBG';
 random_img[4] = '<img src="images/captcha/cap5.png" alt="CAPTCHA" style="vertical-align:bottom;margin-top: 1px;" />';
 random_text[4] = '3DPJC';
 random_img[5] = '<img src="images/captcha/cap6.png" alt="CAPTCHA" style="vertical-align:bottom;margin-top: 1px;" />';
 random_text[5] = 'YRJ2K';
 random_img[6] = '<img src="images/captcha/cap7.png" alt="CAPTCHA" style="vertical-align:bottom;margin-top: 1px;" />';
 random_text[6] = 'EHBB6';
 random_img[7] = '<img src="images/captcha/cap8.png" alt="CAPTCHA" style="vertical-align:bottom;margin-top: 1px;" />';
 random_text[7] = 'WINDF';
 random_img[8] = '<img src="images/captcha/cap9.png" alt="CAPTCHA" style="vertical-align:bottom;margin-top: 1px;" />';
 random_text[8] = 'ECR4R';
 random_img[9] = '<img src="images/captcha/cap10.png" alt="CAPTCHA" style="vertical-align:bottom;margin-top: 1px;" />';
 random_text[9] = 'S3P6N';
 </script>

HTML-

<form method="post">
Username<br />
<input type="text" id="user_input" name="username" /><br />
Password<br />
<input type="password" id="pass_input" name="password" /><br />
Confirm Password<br />
<input type="password" id="v_pass_input" name="v_password" /><br />
<script type="text/javascript">
document.write(random_img[random_number]);
</script>
<br />   <input type="text" id="cap" name="cap" maxlength="5" /><br />     
<input type="submit" id="register" value="Register" onclick="show()" />
</form>

<script>
function show() {
var text = document.getElementById('cap');
if (text.value == "random_text[random_number]"){
    return true;
}
else{
    alert("Incorrect Captcha, Please retry. Remember it's CaSe SeNsiTivE.");
    return false;
}
}
</script>

Answer 1

删除数组周围的引号。使用 text.value == random_text[random_number] 代替 text.value == "random_text[random_number]"

我还将检查作为表单上的提交事件而不是提交按钮上的单击事件。