比较阵列图像&值如果确定提交表格

时间:2014-08-15 15:31:22

标签: javascript jquery html forms

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

我想用Javascript制作一个简单的验证码。由于这个原因,我试图添加自己的验证码,Aweber并不支持验证码,我创建了10个样本图像&然后把它放在阵列上。 如果图像代码&表单字段值匹配然后表单将被提交,否则显示警告。

问题是我无法比较价值。知道如何解决这个问题。 我知道,有一个问题 - 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>

1 个答案:

答案 0 :(得分:1)

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

我还会将支票作为提交事件放在表单上而不是提交按钮上的点击事件。