Question

我有一个页面，我希望不允许在没有填写的情况下提交验证码...

如何与Parsley.js一起使用？我应该按要求申报哪个领域？

我有一个回调JS函数，返回＆＃34; TRUE＆＃34;验证验证码字段（在ASP.NET Razor网页中使用）时，如下所示：

＆＃13;

function captchaCallback(response) {
  //console.log('the response is: ' + response);
  $.post("@(Model.Url)", {
    response: response,
    remoteip: "@HttpContext.Current.Request.UserHostAddress"
  }, function(data) {
    console.log("data success: " + data.response);
  });
}

＆＃13;

<html>

<head>
  <title>reCAPTCHA demo: Simple page</title>
  <script src="http://parsleyjs.org/dist/parsley.js"></script>
  <script src="https://www.google.com/recaptcha/api.js"></script>
</head>

<body>
  <form action="?" method="POST" data-parsley-validate>
    <input type="email" data-parsley-required />
    <div class="g-recaptcha" data-sitekey="my_site_key" 
         data-callback="captchaCallback"></div>
    <br/>
    <input type="submit" value="Submit">
  </form>
</body>

</html>

＆＃13;

Answer 1

不是一个完美的解决方案，但这就是我所做的：

添加一个没有默认值的隐藏输入字段。如果您提交表格（假设欧芹正在做它的事情），它将显示错误。

<input type="hidden" name="completed_captcha" id="completed_captcha" required />

在验证码上设置回调（就像您上面所做的那样）并使用ajax验证验证码。如果验证码有效，请为input#completed_captcha提供值。如果失败，请删除input#completed_captcha的值。

这应该可以解决问题，但是为了让恶意机器人稍微努力一点，我更进了一步并添加了额外的验证。

在页面的某个位置（窗体外）创建另一个隐藏的输入，并将值设置为某个随机值。我把它放在</body>之前。

<input type="hidden" name="hello_bot" id="hello_bot" value="stroll snort birdie of latch taft">

修改input#completed_captcha以与我们新隐藏的字符串进行比较。像这样：

<input type="hidden" name="completed_captcha" id="completed_captcha" required data-parsley-equalto="#hello_bot" />

最后，更改回调以将值设置为与input#hello_bot中的值匹配。

希望这会有所帮助。

Google ReCaptcha和Parsley

1 个答案: