开发者社区 问答 正文

阿里云验证码2.0同一个页面用两个或多个验证码,页面初始化后第一个会失效。帮忙看看?

阿里云验证码2.0同一个页面用两个或多个验证码,页面初始化后第一个会失效。控制台创建了两个场景,第一个依然失效?

展开
收起
真的很搞笑 2024-02-08 13:06:03 248 分享 版权
1 条回答
写回答
取消 提交回答
  • 生命周期流程图如下:可以看到整个流程中只需初始化一次验证码,无需再多次调用initAliyunCaptcha方法。阿里云验证码2.0不支持单个页面注册多个验证码实例,多次调用初始化方法会重复添加元素和注册事件,造成验证表现异常。Q2:一个页面有多处用到验证码怎么处理?A2:方法1:使用弹出式模式(popup),将传入initAliyunCaptcha方法的button元素设置为一个隐藏元素,然后在需要触发验证码的元素上绑定相关事件(一般为点击事件),在事件回调函数中用JavaScript触发上述button元素的点击事件,即可触发验证码弹窗,整个页面共享一个验证码实例。方法2:将验证码封装为一个组件,在需要调用的地方使用,初始化相关参数可作为props传入,验证流程完毕后需要将验证码组件卸载(从dom中移除)。参考官方文档最下方demo。https://help.aliyun.com/zh/captcha/captcha2-0/user-guide/add-a-web-or-html5-client-to-alibaba-cloud-captcha-2#3f4fb80115qkn
    image.png
    ,此回答整理自钉群“【客】验证码2.0接入咨询”

    2024-02-08 13:16:24
    赞同 展开评论