效果图:
原理:
使用阿里第三方验证插件js生成滑块,默认获取验证码按钮为不可点击属性
.getyzm{ pointer-events: none; cursor: default; }
再添置一个可点击属性的类
.getyzmok{ color: #000000 !important; pointer-events: visible; }
当滑块滑动到右侧时触发success回调,在回调函数里给验证码按钮添加可点击属性类
const getyzmbtn = document.querySelector('.getyzm'); getyzmbtn.classList.add('getyzmok');
文档:
源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script> </head> <body> <div id="nc"></div> <div class="row" style="text-align: center;margin-bottom: 10px;display: flex;align-items: center;justify-content: center;"> <input type="text" id="yzm" name="smsCode" required class="customizeInquiry" placeholder="短信验证码" style="width: 40%;height: 45px;border-radius: 20px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;background-color: #f9f9f9;text-indent: 2em;border: none;"> <div class="getyzm" style="width: 20%;height: 45px;background-color: #f9f9f9;border-top-right-radius: 20px;border-bottom-right-radius: 20px;line-height: 45px;border-left: 2px solid #ffffff;transition: all 0.3s;cursor: pointer;margin-left: 1px;font-size: 16px;color:#858A96">获取验证码</div> </div> <script> // 实例化nc AWSC.use("nc", function (state, module) { // 初始化 window.nc = module.init({ // 应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。 appkey: "CF_APP_1", //使用场景标识。它和应用类型标识(appkey字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值,请务必正确填写。 scene: "register", // 声明滑动验证需要渲染的目标ID。 renderTo: "nc", //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID(sessionId)、签名串(sig)、请求唯一标识(token)字段记录下来,随业务请求一同发送至您的服务端调用验签。 success: function (data) { window.console && console.log(data.sessionId) window.console && console.log(data.sig) window.console && console.log(data.token) // 给验证码按钮添加可点击属性 const getyzmbtn = document.querySelector('.getyzm'); getyzmbtn.classList.add('getyzmok'); }, // 滑动验证失败时触发该回调参数。 fail: function (failCode) { window.console && console.log(failCode) }, // 验证码加载出现异常时触发该回调参数。 error: function (errorCode) { window.console && console.log(errorCode) } }); }) </script> </body> </html>
PS:也可以在实例化nc前声明变量去接收滑块success回调生成的参数,用于手机验证码接口的传参。
let phoneNumberV = ''; let sessionIdV = ''; let sigV = ''; let tokenV = ''; let ncInstance; // 实例化nc AWSC.use("nc", function (state, module) { // 初始化 ncInstance = module.init({ // 应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。 appkey: "your_key", //使用场景标识。它和应用类型标识(appkey字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值,请务必正确填写。 scene: "your_scene", // 声明滑动验证需要渲染的目标ID。 renderTo: "nc", //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID(sessionId)、签名串(sig)、请求唯一标识(token)字段记录下来,随业务请求一同发送至您的服务端调用验签。 success: function (data) { phoneNumberV = document.getElementById('phone').value; // 获取手机号 sessionIdV = data.sessionId; tokenV = data.token; sigV = data.sig; const getyzmbtn = document.querySelector('.getyzm'); getyzmbtn.classList.add('getyzmok'); }, // 滑动验证失败时触发该回调参数。 fail: function (failCode) { window.console && console.log(failCode) }, // 验证码加载出现异常时触发该回调参数。 error: function (errorCode) { window.console && console.log(errorCode) } }); }); document.addEventListener('DOMContentLoaded', function() { // 点击获取验证码按钮 document.querySelector('.getyzm').addEventListener('click', function() { // 输出存储的参数变量 // console.log('Stored Phone:', phoneNumberV); // console.log('Stored Session ID:', sessionIdV); // console.log('Stored Token:', tokenV); // 发送验证码后移除按钮的可点击属性避免连续点击 const getyzmbtn = document.querySelector('.getyzm'); getyzmbtn.classList.remove('getyzmok'); if (ncInstance) { ncInstance.reset(); // 触发滑块验证重置 } // console.log('Stored Phone:', phoneNumberV); // console.log('Stored Session ID:', sessionIdV); // console.log('Stored Token:', tokenV); // 创建 FormData 对象 const formData = new FormData(); formData.append('mobile', phoneNumberV); formData.append('type', 1); formData.append('sessionId', sessionIdV); formData.append('sig', sigV); formData.append('token', tokenV); // 发送 POST 请求到指定接口 fetch('手机验证码接口地址', { method: 'POST', // headers: { // 'Content-Type': 'application/json' // }, body:formData }) .then(response => response.json()) .then(data => { console.log('Response:', data); alert(data.message) }) .catch(error => { console.error('Error:', error); alert(error.message) }); }); })