Question

我想在我的表单上实现reCAPTCHA 2，方法与Google演示相同：

但我找不到源代码。与此演示一样，我不想提交表单并通过POST参数进行验证检查，因此我必须弄清楚如何将用户导航回表单页面;相反，我想阻止提交，直到用户成功点击“我不是机器人”复选框。我已经浏览了Google文档，并在网上搜索了一些示例，但未能弄清楚这一点 - 任何帮助都将不胜感激。

修改评论中的示例似乎是reCAPTCHA v1示例，尽管我特别要求v2。我不认为你需要包含一个带有v2的php库，我真正想要的是确保用户在提交之前已经回答了reCAPTCHA挑战的方法（我已经有一个onsubmit JS函数来验证其他输入），不管它是否有效（我在服务器php文件上这样做）。正如我在原帖中所提到的，我已经搜索了一个答案，但是找不到复制我链接到的Google演示的答案。

编辑2 我能够在我的HTML页面上实现客户端检查用户是否使用此JavaScript完成了reCAPTCHA小部件：

<body>
    <form id="entryForm" name="entryForm" method="post" action="php/formSubmit.php" onsubmit="return validateForm();">

...
    </form>

    <script type="text/javascript">
        function validateForm() {
            // User has to check reCAPTCHA
            if(grecaptcha.getResponse() == '') {
                alert("Please complete the I'm-not-a-robot widget before submitting your entry.");
                //document.forms["entryForm"]["acceptAgrmt"].focus();
                return false;
            }
        }
    </script>
</body>

Answer 1

这对我有用：

<form id="entryForm" name="entryForm" method="post" action="php/formSubmit.php" onsubmit="return validateForm();">

。。

<script type="text/javascript">
    function validateForm() {
        // User has to check reCAPTCHA
        if(grecaptcha.getResponse() == '') {
            alert("Please complete the I'm-not-a-robot widget before submitting your entry.");
            //document.forms["entryForm"]["acceptAgrmt"].focus();
            return false;
        }

。。

Answer 2

这是由js和HTML / CSS完成的自定义google reCAPTCHA示例。 Check with fiddle

jQuery('#save_default_color').on('change',function(){

	if(jQuery(this).is(':checked')){
    jQuery(this).attr("disabled", true);
  	jQuery('.box_layer').addClass('hide_border');
		jQuery('.circle_1').addClass('show_cir_1');
	setTimeout(function(){
		jQuery('.circle_2').addClass('show_cir_2');
	 },700);
	setTimeout(function(){
		jQuery('.load_cir').addClass('show_load_cir');
	 },1500);
		setTimeout(function(){
      jQuery('.circle_1').addClass('show_cir_1_hide');
    },2000);
    setTimeout(function(){
    	complete();
    },5000);
}

});

function complete(){
  $(".complete_save").toggleClass("drawn");
  setTimeout(function(){
    jQuery('.load_cir').removeClass('show_load_cir');
  },200);
  
}

input#save_default_color {
    display: none;
}
body {
    margin: 0;
    background-color: #0e0e0e;
}
.set_as_default_color {
    display: block;
    width: 250px;
    background-color: #f9f9f9;
    padding: 20px;
    margin: 100px auto 0 auto;
    border-radius: 4px;
}
p.lbl_text {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 20px;
    font-size: 20px;
    font-family: sans-serif;
    color: #333;
    position: relative;
    top: 2px;
}
.set_as_default_color label {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
        transform: scale(1.5);
}


.box_layer {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 2px solid #999;
    border-radius: 15%;
    transition: all .5s;
    transform: scale(.8);
}
.box_layer.hide_border {
    transition: all .5s;
    transform: scale(0);
    transform-origin: center;
}
.circle_1 {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    transform: scale(0);
    transform-origin: center center;
    border: 6px solid rgba(61, 182, 228, 0.68);
    border-radius: 100%;
    transition: all .5s;
    opacity: 1;
    background-color:rgba(61, 182, 228, 0.50);
}
.circle_1.show_cir_1 {
    transition: all .5s;
    transform: scale(.9);
    opacity: .3;
}
.circle_1.show_cir_1.show_cir_1_hide{
opacity:0;  
}
.circle_2{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: center center;
    background-color:#f9f9f9;
    border-radius: 100%;
    transition: all .5s;
    opacity: 1;
    top: 1px;
    left: 1px;
}
.circle_2.show_cir_2{
    transition: all .7s;
    transform: scale(.5);
}
.load_cir {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 100%;
    height: 100%;
    transform: scale(.8);
    transform-origin: center center;
    opacity:0;
    transition: all .5s;
}
.load_cir.show_load_cir{
  opacity:1;
  transition: all .5s;
}
svg.spinner {
  width: 40px;
  height: 40px;
  x: 0px;
  y: 0px;
  viewBox: 0 0 40 40;
}
svg.spinner circle {
  fill: transparent;
  stroke: #4389f2;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 110.6;
  -webkit-transform-origin: 20px 20px 0;
  -moz-transform-origin: 20px 20px 0;
  -ms-transform-origin: 20px 20px 0;
  -o-transform-origin: 20px 20px 0;
  transform-origin: 20px 20px 0;
  -webkit-animation: spinner 2s linear infinite;
  -moz-animation: spinner 2s linear infinite;
  -ms-animation: spinner 2s linear infinite;
  -o-animation: spinner 2s linear infinite;
  animation: spinner 2s linear infinite;
}
@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    stroke-dashoffset: 26.4;
  }
  50% {
    -webkit-transform: rotate(540deg);
    stroke-dashoffset: 110.6;
  }
  100% {
    -webkit-transform: rotate(1080deg);
    stroke-dashoffset: 26.4;
  }
}
@-moz-keyframes spinner {
  0% {
    -moz-transform: rotate(0deg);
    stroke-dashoffset: 26.4;
  }
  50% {
    -moz-transform: rotate(540deg);
    stroke-dashoffset: 110.6;
  }
  100% {
    -moz-transform: rotate(1080deg);
    stroke-dashoffset: 26.4;
  }
}
@-ms-keyframes spinner {
  0% {
    -ms-transform: rotate(0deg);
    stroke-dashoffset: 26.4;
  }
  50% {
    -ms-transform: rotate(540deg);
    stroke-dashoffset: 110.6;
  }
  100% {
    -ms-transform: rotate(1080deg);
    stroke-dashoffset: 26.4;
  }
}
@-o-keyframes spinner {
  0% {
    -o-transform: rotate(0deg);
    stroke-dashoffset: 26.4;
  }
  50% {
    -o-transform: rotate(540deg);
    stroke-dashoffset: 110.6;
  }
  100% {
    -o-transform: rotate(1080deg);
    stroke-dashoffset: 26.4;
  }
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
    stroke-dashoffset: 26.4;
  }
  50% {
    transform: rotate(540deg);
    stroke-dashoffset: 110.6;
  }
  100% {
    transform: rotate(1080deg);
    stroke-dashoffset: 26.4;
  }
}


p.ajax_complate {
    background-color: #3e13ea;
    color: #fff;
    margin: 50px 0 0 0;
    padding: 5px;
    display: block;
    position: relative;
    width: 100px;
    cursor:pointer;
}



.tick{
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
    -moz-transition: stroke-dashoffset 1s 0.5s ease-out;
    -ms-transition: stroke-dashoffset 1s 0.5s ease-out;
    -o-transition: stroke-dashoffset 1s 0.5s ease-out;
    transition: stroke-dashoffset 1s 0.5s ease-out;
}
.drawn svg .path{
    opacity: 1;
    stroke-dashoffset: 0;
}
.complete_save {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1.5);
    top: -8px;
    left: -2px;
}
.complete_save svg {
    width: 30px;
    height: 30px;
    x: 0px;
    y: 0px;
    viewBox: 0 0 40 40;
}

<div class="set_as_default_color">
<label>
<input type="checkbox" name="save_default_colors" id="save_default_color">
<div class="box_layer"></div>
<div class="circle_1"></div>
<div class="circle_2"></div>
<div class="load_cir">
<svg class="spinner">
    <circle cx="20" cy="20" r="15"></circle>
</svg>
</div>
<div class="complete_save">
<svg>
<polyline class="tick path" style="fill:none;stroke:green;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
	11.6,20 15.9,24.2 26.4,13.8 "/>
</svg>
</div>
</label>
<p class="lbl_text">i am not a robot</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

reCAPTCHA需要的例子

2 个答案: