效果图：
原理：
使用阿里第三方验证插件js生成滑块，默认获取验证码按钮为不可点击属性
.getyzm{pointer-events: none;cursor: default;}再添置一个可点击属性的类
.getyzmok{color: #000000 !important;pointer-events: visible;}当滑块滑动到右侧时触发success回调，在回调函数里给验证码按钮添加可点击属性类
const getyzmbtn = document.querySelector('.getyzm');getyzmbtn.classList.add('getyzmok');
文档：
如何集成滑动验证的前端页面代码_验证码(Captcha)-阿里云帮助中心
源码：
<!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>// 实例化ncAWSC.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;// 实例化ncAWSC.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)});});})
 ：基于提示的分割新时代)
