Javascript验证码不能正常工作

Question

我有验证表格使用Javascript。它必须验证名称，电子邮件和验证码。但通过我的验证功能，名称和电子邮件进行了验证，但captcha未提交按钮onclick后验证。

以下功能显示我的代码：

<script type="text/javascript"> 
function validateform(){ 
var cm_name=document.supportus_form.cm_name.value; 
var cm_email=document.supportus_form.cm_email.value; 
var atpos = cm_email.indexOf("@"); 
var dotpos = cm_email.lastIndexOf("."); 


if (cm_name==null || cm_name=="") 
{ 
    alert("Name can't be blank"); 
    return false; 
} 
else if(atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) 
{ 
    alert("Not a valid e-mail address"); 
    return false; 
} 
var why = ""; 

if(theform.CaptchaInput.value == ""){ 
why += "- Please Enter CAPTCHA Code.\n"; 
} 
if(theform.CaptchaInput.value != ""){ 
if(ValidCaptcha(theform.CaptchaInput.value) == false){ 
why += "- The CAPTCHA Code Does Not Match.\n"; 
} 
} 
if(why != ""){ 
alert(why); 
return false; 
} 
} 

var a = Math.ceil(Math.random() * 9)+ ''; 
var b = Math.ceil(Math.random() * 9)+ ''; 
var c = Math.ceil(Math.random() * 9)+ ''; 
var d = Math.ceil(Math.random() * 9)+ ''; 
var e = Math.ceil(Math.random() * 9)+ ''; 

var code = a + b + c + d + e; 
document.getElementById("txtCaptcha").value = code; 
document.getElementById("CaptchaDiv").innerHTML = code; 

// Validate input against the generated number 
function ValidCaptcha(){ 
var str1 = removeSpaces(document.getElementById('txtCaptcha').value); 
var str2 = removeSpaces(document.getElementById('CaptchaInput').value); 
if (str1 == str2){ 
return true; 
}else{ 
return false; 
} 
} </script> 

的形式下面是我的HTML代码，我使用的：

<form class="form-horizontal" role="form" action='<?php echo 
site_url(); ?>/Welcome/insert_support_info' method="post" enctype="multipart/form-data" onsubmit="return validateform()" name="supportus_form"> 
         <br style="clear:both"/> 
          <h3 style="margin-bottom: 25px; text-align: center;"><u>Let us Know your Interest</u></h3> 
           <div class="form-group"> 
            <input type="text" class="form-control" name="cm_name" id="fullname" placeholder="Enter Your Name"/> 
            <input type="text" class="form-control" name="cm_email" id="email" placeholder="Enter Your E-Mail"/> 
            <input type="text" class="form-control" name="cm_phone" id="phone" placeholder="Enter Your Phone Number or Mobile Number"/> 


           <textarea class="form-control" name="cm_message" id="message" rows="3" placeholder="Add your Query"></textarea> 
           <span class="help-block"><p id="characterLeft" class="help-block ">Limit - 100 words</p></span> 
           <input class="form-control" name="datetime" value="<?php 
            date_default_timezone_set('Asia/Kolkata'); 
            $date = date('m/d/Y h:i:s a', time()); echo $date; 
           ?>" type="hidden" /> 
           <!-- START CAPTCHA --> 
<br> 
<div class="capbox"> 

<div id="CaptchaDiv"></div> 

<div class="capbox-inner"> 
Type the above number:<br> 

<input type="hidden" id="txtCaptcha"> 
<input type="text" name="CaptchaInput" id="CaptchaInput" size="15"><br> 

</div> 
</div> 
<br><br> 
<!-- END CAPTCHA --> 

           <button type="submit" class="btn btn-success">Submit</button> &nbsp;&nbsp;&nbsp; 
           </div> 
           <hr/> 

         </form> 

我遵守了CSS来显示验证码形式

<style> 
    .capbox { 
    background-color: #92D433; 
    border: #B3E272 0px solid; 
    border-width: 0px 12px 0px 0px; 
    display: inline-block; 
    *display: inline; zoom: 1; /* FOR IE7-8 */ 
    padding: 8px 40px 8px 8px; 
    } 

.capbox-inner { 
    font: bold 11px arial, sans-serif; 
    color: #000000; 
    background-color: #DBF3BA; 
    margin: 5px auto 0px auto; 
    padding: 3px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    } 

#CaptchaDiv { 
    font: bold 17px verdana, arial, sans-serif; 
    font-style: italic; 
    color: #000000; 
    background-color: #FFFFFF; 
    padding: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    } 

#CaptchaInput { margin: 1px 0px 1px 0px; width: 135px; } 

    </style> 

使用上面的代码，验证码不起作用。我第一次使用captcha。

Answer 1

嘿你正在以不正确的方式使用条件标签。这导致未知的错误。以下Javascript代码正常工作。

function validateform(){ 
    var cm_name=document.supportus_form.cm_name.value; 
    var cm_email=document.supportus_form.cm_email.value; 
    var atpos = cm_email.indexOf("@"); 
    var dotpos = cm_email.lastIndexOf("."); 
    var captha = document.getElementById("txtCaptcha").value; 
    var capthaValue = document.getElementById('CaptchaInput').value.replace(/ /g,''); 
    console.log(typeof captha); 
    if(capthaValue == "" || captha != capthaValue) { 
     validCaptcha() 
    } 

    if (cm_name==null || cm_name=="") 
    { 
     alert("Name can't be blank"); 
     return false; 
    } 
    else if(atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) 
    { 
     alert("Not a valid e-mail address"); 
     return false; 
    } 
    function validCaptcha() { 
     var why = ""; 
     if(capthaValue == ""){ 
      why += "- Please Enter CAPTCHA Code.\n"; 
     } 
     if(capthaValue != ""){ 
      if((captha != capthaValue) == false){ 
       why += "- The CAPTCHA Code Does Not Match.\n"; 
      } 
     } 
     if(why != ""){ 
     alert(why); 
     return false; 
     } 
    } 
} 

var a = Math.ceil(Math.random() * 9)+ ''; 
var b = Math.ceil(Math.random() * 9)+ ''; 
var c = Math.ceil(Math.random() * 9)+ ''; 
var d = Math.ceil(Math.random() * 9)+ ''; 
var e = Math.ceil(Math.random() * 9)+ ''; 

var code = a + b + c + d + e; 
document.getElementById("txtCaptcha").value = code; 
document.getElementById("CaptchaDiv").innerHTML = code;