摘要：window.AliyunCaptchaConfig = {// 必填，验证码示例所属地区，支持中国内地（cn）、新加坡（sgp）。region: "cn",// 必填，身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片
切图网qietu.com提供专业的前端开发服务，当然也包括数据联调，api接口对接等，以下是应项目需要本地试运行并且跑通的比较复杂的阿里云验证码2.0接口的情况，附aliyun验证码2.0-一页面多用 popup模式+layer弹窗代码片段；
js代码
window.AliyunCaptchaConfig = {// 必填，验证码示例所属地区，支持中国内地（cn）、新加坡（sgp）。region: "cn",// 必填，身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标。prefix: "1jovvx",};$('#btn').click(function{$('#yzm').click;})$(document).on('click','#login-btn',function{alert(3);$('#yzm').click;})/*自定义一段阿里云调用代码，可以回调写一段自己的js代码方法aliyunCodev2(function{alert(3);})* */function aliyunCodev2(buttonId, callback){var captcha;// 嵌入式，除region和prefix以外的参数window.initAliyunCaptcha({// 场景ID。通过步骤一添加验证场景后，您可以在验证码场景列表，获取该场景的场景IDSceneId: '1t6qjrc2',// 验证码模式。embed表示要集成的验证码模式为嵌入式。无需修改mode: 'popup',// 页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。//element: '#captcha-element',// 触发业务请求的元素。button表示单击登录按钮后，触发captchaVerifyCallback函数。您可以根据实际使用的元素修改element的值//button: '#yzm',button:buttonId,// 业务请求(带验证码校验)回调函数，无需修改captchaVerifyCallback: captchaVerifyCallback,// 业务请求结果回调函数，无需修改onBizResultCallback: onBizResultCallback,// 绑定验证码实例函数，无需修改getInstance: getInstance,// 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 pxslideStyle: {width: 360,height: 40,},// 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）language: 'cn',// 完成验证后，是否立即发送验证请求（调用captchaVerifyCallback函数）immediate: false,});// 绑定验证码实例函数。该函数为固定写法，无需修改function getInstance(instance) {captcha = instance;}/*** @name captchaVerifyCallback* @function* @param {String} captchaVerifyParam - 由验证码脚本回调的验证参数，不需要做任何处理，直接传给服务端即可* @param {Function} callback - 回调函数，用于处理验证结果，ES5语法兼容*/function captchaVerifyCallback(captchaVerifyParam) {//alert(3);// 1.向后端发起业务请求，获取验证码验证结果和业务结果// requestVerifyResult('http://您的业务请求地址', {// captchaVerifyParam: captchaVerifyParam, // 验证码参数// //yourBizParam... // 业务参数// }, function(result) {// // 2.构造标准返回参数// var verifyResult = {// captchaResult: result.captchaVerifyResult,// bizResult: result.bizResult,// };// // 调用回调函数，传入验证结果// callback(verifyResult);// });//callback(1);// 2.构造标准返回参数const verifyResult = {// 验证码验证是否通过，boolean类型，必选。captchaResult: true,// 业务验证是否通过，boolean类型，可选；若为无业务验证结果的场景，bizResult可以为空。//bizResult: 从result获取您的业务验证结果,};return verifyResult;}// 业务请求验证结果回调函数function onBizResultCallback(bizResult) {//alert('aaa');if (bizResult === true) {// 如果业务验证通过，跳转到对应页面。此处以跳转到https://www.aliyun.com/页面为例//window.location.href = 'https://www.aliyun.com/';/*验证码通过，执行之定义js方法* */// 检查传入的参数是否为函数if (typeof callback === 'function') {// 执行传入的函数callback;} else {console.error('传入的参数不是一个函数');}} else {// 如果业务验证不通过，给出不通过提示。此处不通过提示为业务验证不通过！alert('业务验证不通过！');}}}$('#open').click(function{layer.open({type: 1,title:false,zIndex: 2000, // 设置z-indexskin: 'm-lay1 m-lay-loginnew m-layclose', //加上边框area: ['540px', 'auto'], //宽高//content:$('#login'),//content:$('.embed-wrapper'),content:''+''+'用户名：'+''+''+''+'密码：'+''+''+''+'登录触发验证码弹窗'+'',btn: false,btnAlign: 'c',shade: [0.6],shadeClose:true,success:function{aliyunCodev2('#yzm',function{alert;})}});})$('#open2').click(function{layer.open({type: 1,title:false,zIndex: 2000, // 设置z-indexskin: 'm-lay1 m-lay-loginnew m-layclose', //加上边框area: ['540px', 'auto'], //宽高//content:$('#login'),//content:$('.embed-wrapper'),content:''+''+'用户名：'+''+''+''+'密码：'+''+''+'
'+'登录触发验证码弹窗触发验证码弹窗3'+'',btn: false,btnAlign: 'c',shade: [0.6],shadeClose:true,success:function{aliyunCodev2('#yzm2',function{//根据值不同给不同方法switch ($('body').data('yzmbtn')){case 'aaa':alert(3);break;}})//$('#yzm3').click(function{$(document).on('click','#yzm3',function{$('body').attr('data-yzmbtn','aaa'); //标记点击元素$('#yzm2').click;})}});})
切图网qietu.com是国内较早提供专业前端开发服务的公司，为cctv7、腾讯、智联招聘等企业提供过服务，有需要的联系。
来源：切图网阿明
