如何在HTML JavaScript中提交表单前使用验证码。

Question

如何在HTML JavaScript中提交表单前使用验证码。

3

<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之前验证它。

提前感谢！

- Meena patel

你可以使用简单的数学验证码或图像验证码。你想用哪一个？ - Ataur Rahman Munna

简单的数学验证码 - Meena patel

嘿，看看这个例子。 - Ataur Rahman Munna

2个回答

1

您可以使用此代码，它可以正常工作。您可以从给定的链接下载验证码图片

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>

- Mohd Aarif

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ataur Rahman Munna · Accepted Answer

请看以下简单示例：

$(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>

解释：当页面加载时，我们生成随机数并创建一个查询字符串，并将实际结果存储在一个隐藏字段中。当用户提交表单时，我们会检查用户输入和隐藏字段的输入是否匹配。如果匹配，则通过验证，否则被阻止。