简单介绍下阿里云的H5滑动验证+H5示例源码

简介: 简单介绍下阿里云的H5滑动验证+H5示例源码

我承认我是很菜,不过还好我喜欢看别人的源码,看过以后我还喜欢分享出来,给你们也看看,不要觉得我很伟大, 事实上我就是那么伟大(滚犊子,还写不写了),嗯,好的,下面开始。

效果预览:

这是用的阿里云的组件做的,源码是这样的:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <!-- 国内使用 -->
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
    <!-- 若您的主要用户来源于海外,请替换使用下面的js资源 -->
    <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script> -->
</head>
<body>
    <div id="__nc" style="margin-left:auto;margin-right:auto;width:30%;height:100px;padding-top:100px;">
        <div id="nc"></div>
    </div>
    <script>  
    var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
    var nc=NoCaptcha.init({
        renderTo: '#nc',     //声明滑动验证需要渲染的目标元素ID
        appkey: 'CF_APP_1',  
        scene: 'register',   
        token: nc_token,     
        trans: {"key1": "code200"},
        elementID: ["usernameID"],
        is_Opt: 0,
        language: "cn",
        timeout: 10000,
        retryTimes: 5,
        errorTimes: 5,
        inline:false,
        apimap: {
            // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
            // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
        },
        bannerHidden:false,
        initHidden:false, 
        callback: function (data) {
            window.console && console.log(nc_token)
            window.console && console.log(data.csessionid)
            window.console && console.log(data.sig)
        },
        error: function (s) {
        }
    });
    NoCaptcha.setEnabled(true);
    nc.reset();//请务必确保这里调用一次reset()方法
    NoCaptcha.upLang('cn', {
        'LOADING':"加载中...",//加载
        'SLIDER_LABEL': "请向右滑动验证",//等待滑动
        'CHECK_Y':"验证通过",//通过
        'ERROR_TITLE':"非常抱歉,这出错了...",//拦截
        'CHECK_N':"验证未通过", //准备唤醒二次验证
        'OVERLAY_INFORM':"经检测你当前操作环境存在风险,请输入验证码",//二次验证
        'TIPS_TITLE':"验证码错误,请重新输入"//验证码输错时的提示
    });
    </script>
</body>
</html>

ps:这次的代码是可以直接使用的,但是有的说,想要里面的js,很简单,查看网页源代码就可以,后者你很懒,也行,下面是js:点击下载

是不是脑瓜子嗡嗡的,我第一次看也一样,慢慢看吧。

目录
打赏
0
0
0
0
0
分享
相关文章
轻松愉悦的验证方式:实现图片旋转验证功能
轻松愉悦的验证方式:实现图片旋转验证功能
235 0
让你的文档从静态展示到一键部署可操作验证
好的文档应当超越文字的界限,成为知识传递和技能培养的桥梁。阿里云函数计算让我们朝着这一目标迈出了重要一步。我们将文档从传统的静态页面升级为一个动态的、互动性强的工具,用户可以通过一键部署直接在函数计算平台验证文档内容。
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
117 0
若依框架---选中某值 其他值自动回调填充
若依框架---选中某值 其他值自动回调填充
243 0
移动端整页滑屏示例(上下滑动整屏)demo效果示例(整理)
移动端整页滑屏示例(上下滑动整屏)demo效果示例(整理)
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等