如何在提交表單之前使用驗證碼。在HTML JavaScript中

Question

<form action="#" method="post" id="contactMsg">
    <div class="row">
        <div class="col-md-4">
            <input name="name" id="name"  required="required" type="text"  placeholder="Name">
        </div>
        <div class="col-md-4">
            <input name="email" id="email" required="required" type="text" placeholder="Email">
        </div>
        <div class="col-md-4">
            <input name="subject" id="subject" required="required"  type="text" placeholder="Subject">
        </div>
        <div class="col-md-12">
            <textarea name="comments" id="comment" required="required"  cols="10" rows="10" placeholder="Comments"></textarea>
        </div>
        <div class="col-md-12">
            <input name="comment" id="ContactNow" type="submit" value="Submit">
        </div>
    </div>
</form>

//這里是Ajax代碼

var formData = new FormData($("#contactMsg")[0]);

$.ajax({
    url: 'contactMsg.php',
    data:formData,
    cache: false,
    contentType:false,
    processData:false,
    type: 'post',
    success: function(response) {
        $("#contactMsg")[0].reset();
        $("#SucessMsg").fadeIn('slow').delay(3000).fadeOut('slow');
    }
});

我從不使用驗證碼。 我真的不知道這個。 請任何人有想法，而不是告訴我，我想添加驗證碼，然后在調用ajax之前驗證它。 提前致謝

Answer 1

看一個簡單的例子：

 $(document).ready(function(){ var a = (Math.ceil(Math.random()*9))+1; var b = (Math.ceil(Math.random()*9))+1; var queryText = a+" + "+b+"="; document.getElementById('queryString').innerHTML=queryText; var result = parseInt(a)+parseInt(b); document.getElementById('actualResult').value=result; }); function _validate(){ if(document.getElementById('actualResult').value == document.getElementById('result').value){ alert("matched"); }else{ alert("not matched"); } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <form action="#" method="post" id="contactMsg"> <div class="row"> <div class="col-md-4"> <input name="name" id="name" required="required" type="text" placeholder="Name"> </div> <div class="col-md-4"> <input name="email" id="email" required="required" type="text" placeholder="Email"> </div> <div class="col-md-4"> <input name="subject" id="subject" required="required" type="text" placeholder="Subject"> </div> <div class="col-md-12"> <textarea name="comments" id="comment" required="required" cols="10" rows="10" placeholder="Comments"></textarea> </div> <div class="col-md-12"> <label id="queryString"></label> <input type="text" value="" id="result"/> </div> <input type="hidden" id="actualResult"/> <div class="col-md-12"> <input name="comment" id="ContactNow" type="button" value="Submit" onclick="_validate();"> </div> </div> </form> </body>

說明：當頁面加載時，我們生成隨機數並生成查詢字符串並在隱藏字段中生成實際結果。 當用戶提交時，我們檢查了用戶輸入的隱藏字段輸入。如果匹配則我們通過，如果沒有我們阻止。

Answer 2

您可以使用此代碼，它的工作正常，您可以從給定的鏈接下載驗證碼圖像

 var val=[]; val.push("VQ7W3"); /** push value in this array */ val.push("A1234"); /** To maintain image order here */ val.push("A32BD"); /** if first image 0_capt.jpeg contains value VQ7W3 so push this value into zero(0) index of array */ val.push("LD673"); val.push("PQ78V"); val.push("MX81W"); var x; /**This below method generate random number from 0-5 * name of image starts with that number will set on * captcha location */ function myFunction() { x = Math.floor(Math.random() * 6); // here 6 stand for how many images you are using return 0-6 number. $("#imgCaptchaPlace").html("<img id='abc' src='captcha_images/"+x+"_cpt'/><br>"+val[x]) ; } myFunction(); /** * This below method will call on change of input fields where user enter * captcha code value */ function chaeckCpatch(id) { if($("#"+id).val()==val[x]) { alert("match"); } else { alert("No match"); } }

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <body> <!-- below div use to display captcha image --> <div id="imgCaptchaPlace"></div> <!-- below textfield where user enter captcha value --> <input type="text" id="captchaText" onchange="chaeckCpatch(this.id);"/> <!-- include this JS file --> <script src="captchByAarif.js" type="text/javascript"></script> </body> </html>

如何在提交表單之前使用驗證碼。在HTML JavaScript中

問題描述

2 個解決方案

解決方案1
0 已采納 2017-01-11 13:31:43

解決方案2
0 2017-08-17 13:39:43

如何在提交表單之前使用驗證碼。 在HTML JavaScript中

問題描述

2 個解決方案

解決方案1 0 已采納 2017-01-11 13:31:43

解決方案2 0 2017-08-17 13:39:43

如何在提交表單之前使用驗證碼。在HTML JavaScript中

解決方案1
0 已采納 2017-01-11 13:31:43

解決方案2
0 2017-08-17 13:39:43