前端表单提交问题

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

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

有个难点不会，所以请教一下

这里我使用的是google的reCAPTCHA验证码

实现功能：
在用户输完name、password并正确的情况下，点击“提交”按钮后，js先判断验证码是否正确，（不正确就alert‘错误’并禁止post提交数据）如果正确就将表单的用户名的密码post传输
就是先判断验证码在提交数据
但是js不太会，想请教各位大神，能给出代码更好

（截图中验证码没问题）
html代码如下：

[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的，

[HTML] 纯文本查看 复制代码

 <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的，[mw_shl_ ...

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

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

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

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

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 前端表单提交问题