相对于复选框式的,该插件还支持隐藏式的。

基本型

基本型是最简单的一个方式,它需要先将js文件引入,不能异步,并且要开启自动加载组件,基本就是把一个组件绑定在一个按钮元素上,而且这个隐藏式,还需要单独申请一个隐藏式的key,自行申请。

<script src="https://www.recaptcha.net/recaptcha/api.js"></script>
<script>
  function onSubmit(token) {
    console.log(token)
  }
</script>
<button class="g-recaptcha" data-sitekey="第一个key" data-callback='onSubmit'>Submit</button>

先引入,并创建好成功的回调函数,然后元素绑定,class一定不要漏写了。

回调函数返回一个token,也还是判断length。

这样的方式有一个问题,就是如果该元素的click事件被人提前截取了可能会导致这个方法无效

异步基本加载

<script>
  function onloadCallback() {
    grecaptcha.render('submit', {
      'sitekey': '第一个key',
      'callback': onSubmit
    });
  };
  function onSubmit(token) {
    console.log(token)
  }
</script>
<input id='submit' type="submit" value="Submit">
<script src="https://www.recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

使用了这种方式,在不使用异步加载自己手动渲染的情况下我们没办法使用grecaptcha.getResponse()的方式去判读是否验证通过,我们可以使用grecaptcha.execute();的方式去触发一次判断,然后成功通过后触发回调函数,从而进行判断。

grecaptcha.execute();接受一个opt_widget_id参数,不写默认为第一个。

分类: JavaScript 标签: reCAPTCHA

评论

暂无评论数据

暂无评论数据

目录