<script src='https://www.google.com/recaptcha/api.js'></script>
我已在表单结束前添加了这个
<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div>
我能看到与 https://developers.google.com/recaptcha/ 相似的 reCAPTCHA。
然而，当用户在未勾选复选框的情况下提交数据时，数据仍会被提交。是否需要添加其他代码来检查用户是否按下了复选框？最好使用 JavaScript 实现。
谷歌提供了回调选项，当复选框被选中时可用。
将以下内容添加到您的表单元素中：
data-callback="XXX"
例子：
<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="== xxxxxx =="></div>
<button id="submitBtn" disabled>Submit</button>
接下来创建一个回调函数并编写您需要的任何代码。
例如：
function recaptchaCallback() {
$('#submitBtn').removeAttr('disabled');
};
您还可以调用grecaptcha对象进行检查。当未选中时，grecaptcha.getResponse();为空，当选中后，则包含验证代码。
当未选中时，grecaptcha.getResponse().length === 0。
function isCaptchaChecked() {
return grecaptcha && grecaptcha.getResponse().length !== 0;
}
if (isCaptchaChecked()) {
// ...
}
var isCaptchaChecked = (grecaptcha && grecaptcha.getResponse().length !== 0); - jaybro要检查 Google reCAPTCHA 是否被选中，您可以使用以下代码：
<script>
if(grecaptcha && grecaptcha.getResponse().length > 0)
{
//the recaptcha is checked
// Do what you want here
alert('Well, recaptcha is checked !');
}
else
{
//The recaptcha is not cheched
//You can display an error message here
alert('Oops, you have to check the recaptcha !');
}
</script>
var checkCaptch = false;
var verifyCallback = function(response) {
if (response == "") {
checkCaptch = false;
}
else {
checkCaptch = true;
}
};
$(document).ready(function() {
$("#btnSubmit").click(function() {
if (checkCaptch && grecaptcha.getResponse()!="") {
//Write your success code here
}
});
})
<input id='recaptcha_check_empty' required tabindex='-1',
style='width:50px; height:0; opacity:0; pointer-events:none;
position:absolute;
bottom:0;'>
将两个宽度用position=relative;的div包围起来，以便将在recaptcha底部上方指向bottom:0;。
现在浏览器会友好地提示您填写此字段-指向recaptcha。
现在我们需要回调函数：
<div class="g-recaptcha" data-callback="recaptchaCallback" ...
并且
function recaptchaCallback() {
$('#recaptcha_check_empty').val(1);
}
import ReCAPTCHA from 'react-google-recaptcha'
将其应用于您的组件中
<ReCAPTCHA style={{margin: '5px', transform: 'scale(0.8)'}} ref={recaptchaRef} sitekey={recaptchaKey} onChange={updateRecaptcha}/>
你可以使用 useRef 或者直接使用你导入的 ReCAPTCHA，我使用了 useRef。
const recaptchaRef = useRef<any>()
现在，我该如何检查recaptchaRef是否被选中？
if (recaptchaRef.current.props.grecaptcha.getResponse().length !== 0) {
//your condition
}
基本上，你是在说'如果Recaptcha为真，则执行此操作'
这是完整的表单代码，可帮助您（我正在使用TypeScript）
const Formid = // yout formid
const FormSpark = `https://submit-form.com/${Formid}`
type FormState = {
name: string,
mail: string,
message: string
}
const initialState = {
name: '',
mail: '',
message: '',
}
const [wrongmail, setWrongmail] = useState(false)
const [wrongname, setWronname] = useState(false)
const [wrongtext, setWrongtext] = useState(false)
const [alert, setAlert] = useState(false)
const recaptchaRef = useRef<any>()
const recaptchaKey = //your recaptcha public key const [recaptchaToken, setRecaptchaToken] = useState<string>()
const [formstate, setFormState] = useState<FormState>(initialState)
const submit = async(event: FormEvent) =>{
event.preventDefault()
await postSubmission()
}
const updateRecaptcha = (token: string | null)=>{
setRecaptchaToken(token as string)
}
const {name, mail, message} = formstate
const postSubmission = async() => {
const payload = {
...formstate,
"g-recaptcha-response": recaptchaToken
}
try {
if (name && mail && message) {
if (mail.includes('@') && mail.includes('.') && mail.length > 5) {
if (name.includes(' ') && name.length> 5) {
if (message.length > 20) {
if (recaptchaRef.current) {
if (recaptchaRef.current.props.grecaptcha.getResponse().length !== 0) {
console.log('hola')
setAlert(true)
const result = await axios.post(FormSpark, payload)
setFormState(initialState)
recaptchaRef.current.reset()
if (result) {
setTimeout(() => {
setAlert(false)
},2000)
}
}
}
}
}
}
if (!name && !(name.length> 5) && !(name.includes(' '))) {
setWronname(true)
setTimeout(() => {
setWronname(false)
},3000)
}
if (!mail && !mail.includes('@') && !mail.includes('.') && !(mail.length > 5)) {
setWrongmail(true)
setTimeout(()=>{
setWrongmail(false)
},3000)
}
if (!message && !(message.length > 20)) {
setWrongtext(true)
setTimeout(() => {
setWrongtext(false)
},3000)
}
}
} catch(error){
console.log(error);
}
}
const updateForm = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const {id, value} = event.target
const formKey = id as keyof FormState
const updatedFormState = {...formstate}
updatedFormState[formKey] = value
setFormState(updatedFormState)
}
<div class="contact-inner contact-message">
<label for="message-text" class="col-form-label">CAPTCHA</label>
<div class="g-recaptcha" data-sitekey="<?php echo 6LfSJmocAAAAAFFMpMKB1CtYNJYDyDswO7GpxRXS ;?>">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!DOCTYPE html>
<html>
<head>
<title>CAPTCHA</title>
</head>
<body>
<div class="contact-inner contact-message">
<label for="message-text" class="col-form-label">CAPTCHA</label>
<div class="g-recaptcha" data-sitekey="<?php echo GOOGLE_KEY ;?>"></div>
</div>
</body>
</html>