前端表单提交问题

qadan 发表于 2020-1-20 10:03

本帖最后由 qadan 于 2020-1-20 10:06 编辑

有个难点不会，所以请教一下{:1_893:}
这里我使用的是google的reCAPTCHA验证码

实现功能：
在用户输完name、password并正确的情况下，点击“提交”按钮后，js先判断验证码是否正确，（不正确就alert‘错误’并禁止post提交数据）如果正确就将表单的用户名的密码post传输
就是先判断验证码在提交数据
但是js不太会，想请教各位大神，能给出代码更好{:1_893:}
（截图中验证码没问题）
html代码如下：<html>
<meta charset="utf-8">
<head lang="zh-CN">
<title>reCAPTCHA demo</title>
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
</head>
<body>
<center>
<form action="?" method="1POST">
   <input type="text" placeholder="用户名"><br><br>
   <input type="password" id="password" placeholder="密码">
   <div class="g-recaptcha" data-callback="robotVerified" data-sitekey="my_sitekey"></div>
   <br>
         <input type="button" value="提交">
</form>
</center>
</body>
<script>
function robotVerified(){
   console.log('Verified: not robot');
}
</script>
</html>

海是倒过来的天 发表于 2020-1-20 10:29

你百度比在这里问快多了。。

明远发表于 2020-1-20 10:40

谢谢老师分享

被遗忘的路人 发表于 2020-1-20 10:51

本帖最后由被遗忘的路人于 2020-1-20 10:55 编辑

<html>
<meta charset="utf-8">
<head lang="zh-CN">
<title>reCAPTCHA demo</title>
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
</head>
<body>
<center>
<form action="" submit="return false">
   <input type="text" id="name" placeholder="用户名"><br><br>
   <input type="password" id="password" placeholder="密码">
   <div class="g-recaptcha" data-callback="robotVerified" data-sitekey="my_sitekey"></div>
   <button>提交</button>
</form>
</center>
</body>

<script>
let robotStatus = false;
robotVerified (){
   console.log('Verified: not robot');
   robotStatus = true;
}
submitBtn (){
   if(robotStatus ){
         let userName = document.getElementById("name").value;
         let password= document.getElementById("password").value;
         if(userName =="" || password == ""){
               alert("账号或者密码不能为空!")
         }else{
               // 提交数据
         }
   }else{
      alert("验证码错误!")
   }
}
</script>
</html>

被遗忘的路人 发表于 2020-1-20 10:55

被遗忘的路人发表于 2020-1-20 10:51
reCAPTCHA demo

提交这个按钮上面有个 onclick 事件对应的 submitBtn() 不知道为啥加上去不显示

qadan 发表于 2020-1-20 11:20

被遗忘的路人发表于 2020-1-20 10:51
reCAPTCHA demo

感谢，我试下

qadan 发表于 2020-1-20 11:31

被遗忘的路人发表于 2020-1-20 10:51
reCAPTCHA demo

不行啊，我加到网站里，输入账号密码，不点验证码直接登录成功，alert也不显示，按钮是input的， <input type="submit" value="登录" class="btn btn-primary btn-user btn-block" />

被遗忘的路人 发表于 2020-1-20 11:41

qadan 发表于 2020-1-20 11:31
不行啊，我加到网站里，输入账号密码，不点验证码直接登录成功，alert也不显示，按钮是input的，

贴下你全部代码,我拿过来改

qadan 发表于 2020-1-20 12:02

被遗忘的路人发表于 2020-1-20 11:41
贴下你全部代码,我拿过来改

非常感谢，我已经解决了，我百度了，有一种方法，访问页面先将按钮disabled禁用，将那个谷歌验证码验证正确，然后在用js中removeAttr删除disabled就解决了，感谢大哥的热心{:1_893:}

页: [1]

吾爱破解 - 52pojie.cn's Archiver

前端表单提交问题