Question

我有一个使用Javascript的验证表单。它必须验证名称，电子邮件和验证码。但是通过我的验证功能，验证了名称和电子邮件，但是在提交按钮的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>

使用Above代码，验证码不起作用。我是第一次使用验证码。

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;

JavaScript中的验证码不起作用

1 个答案: