1

我在我的 php 网站上关注这个 Invisible ReCaptcha 文档：http ://www.pinnacleinternet.com/installing-invisible-recaptcha/一切正常。但是，虽然在同一页面中的多个表单上实施，但验证码仅适用于第一个表单并且不确定第二个表单发生了什么，我很想知道它如何在单个页面中处理多个表单。或者有人请为多种表格推荐一个工作文档吗？

//this is @Geordy's javascript portion modified according to jquery.validate
    <script type="text/javascript">

    $().ready(function() {
    var demo1Call = 0;
    var demo2Call = 0;

        // validate and submit 1st form
        $("#demo-form1").validate({
            rules: {

                  pass: {
                    required: true,
                    pwcheck: true,
                    minlength: 5
                  },
            },
            messages: {
                  pass: {
                    required: "Please provide a password",
                    pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these !@#$%",
                    minlength: "Your password must be at least 5 characters long"
                  },
            },
            success: function(error){
                console.log("Successfully validated");  
            },
            submitHandler: function(form) {

                demo1Call++;
                if(demo1Call==1){
                    widgetId1 = grecaptcha.render('recaptcha1', {
                    'sitekey' : '<?php echo $config['client-key']; ?>',
                    'callback' : onSubmit1,
                    'size' : "invisible"
                    });
                }
                grecaptcha.reset(widgetId1);
                grecaptcha.execute(widgetId1);
            },
        });

        //validate and submit 2nd form
        $("#demo-form2").validate({
            rules: {

                  pass: {
                    required: true,
                    pwcheck: true,
                    minlength: 5
                  },
            },
            messages: {
                  pass: {
                    required: "Please provide a password",
                    pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these !@#$%",
                    minlength: "Your password must be at least 5 characters long"
                  },
            },
            success: function(error){
                console.log("Successfully validated");  
            },
            submitHandler: function(form) {

                demo2Call++;
                if(demo2Call==1){
                    widgetId2 = grecaptcha.render('recaptcha2', {
                    'sitekey' : '<?php echo $config['client-key']; ?>',
                    'callback' : onSubmit2,
                    'size' : "invisible"
                    });
                }
                grecaptcha.reset(widgetId2);
                grecaptcha.execute(widgetId2);
            },
        });



    });

    $.validator.addMethod("pwcheck", function(value) {
       var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%])[0-9A-Za-z!@#$%]{8,24}$/;
       return pattern.test(value);
    });

function onSubmit1(token){
        document.getElementById("demo-form1").submit();
};

function onSubmit2(token){
        document.getElementById("demo-form2").submit();
};

</script>
4

1 回答 1

4

下面的代码对我有用

<?php
$config = require('config.php');
?>
<html>
  <head>
    <title>reCAPTCHA demo</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Boostrap Validator --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" ></script>

    <script type="text/javascript">
    $(document).ready(function(){
        var demo1Call = 0;
        var demo2Call = 0;

        $('#demo-form1').validator().on('submit', function (e) {
          if (e.isDefaultPrevented()) {
            // handle the invalid form...
            console.log("validation failed");
          } else {
            // everything looks good!
            demo1Call++;

            e.preventDefault();         
            console.log("validation success");

            if(demo1Call==1)
            {
                widgetId1 = grecaptcha.render('recaptcha1', {
                'sitekey' : '<?php echo $config['client-key']; ?>',
                'callback' : onSubmit1,
                'size' : "invisible"
                });
            }

            grecaptcha.reset(widgetId1);

            grecaptcha.execute(widgetId1);          
          }
        });

        $('#demo-form2').validator().on('submit', function (e) {
          if (e.isDefaultPrevented()) {
            // handle the invalid form...
            console.log("validation failed");
          } else {
            // everything looks good!
            demo2Call++;

            e.preventDefault();
            console.log("validation success");

            if(demo2Call==1)
            {
                widgetId2 = grecaptcha.render('recaptcha2', {
                'sitekey' : '<?php echo $config['client-key']; ?>',
                'callback' : onSubmit2,
                'size' : "invisible"
                });
            }

            grecaptcha.reset(widgetId2);

            grecaptcha.execute(widgetId2);

          }
        });

    });

    function onSubmit1(token){
            document.getElementById("demo-form1").submit();
    };

    function onSubmit2(token){
            document.getElementById("demo-form2").submit();
    };

    </script>


  </head>
  <body>
    <div class="container">
    <br>
        <div class="row">
            <div class="col-md-5 col-md-offset-3">
                <form id="demo-form1" data-toggle="validator" role="form"  action="admin.php" method="POST" >
                    <div class="form-group">
                        <label for="inputName" class="control-label">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Geordy James" required/>
                    </div>
                    <div id='recaptcha1' ></div>
                    <button class="btn btn-block btn-primary"  type="submit">Submit</button>
                </form>
            </div>
        </div>

    <br>
        <div class="row">
            <div class="col-md-5 col-md-offset-3">
                <form id="demo-form2" data-toggle="validator" role="form"  action="admin2.php" method="POST" >
                    <div class="form-group">
                        <label for="inputName" class="control-label">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Geordy James" required/>
                    </div>
                    <div id='recaptcha2' ></div>
                    <button class="btn btn-block btn-primary"  type="submit">Submit</button>
                </form>
            </div>
        </div>  
    </div>
    <script src="https://www.google.com/recaptcha/api.js" async defer ></script>
  </body>
</html>

我在这个程序中使用了非官方的 Google Invisible reCAPTCHA PHP 库，您可以从https://github.com/geordyjames/google-Invisible-reCAPTCHA下载它。如果此方法不适合您，请在下方评论。

于 2017-05-10T11:59:40.627 回答