我想在我的表单上实现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>
答案 0 :(得分:0)
这对我有用:
<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;
}
。 。
答案 1 :(得分:-1)
这是由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>