Jsp页面用javascript加 滑动验证条

2022-08-16 09:16:45

先上个效果图
在这里插入图片描述

1.
在head之间加入

<head>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
</head>

2.
在jsp页面想要显示滑动条处加入

<div id="your-dom-id" class="nc-container"></div> 
<!--No-Captcha渲染的位置,其中 class 中必须包含 nc-container-->

3.
在body下加入javascript。
注意!!!!一定要在body下方加,否则滑动条很可能显示不出来。

<script type="text/javascript" >
var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
        var NC_Opt = 
        {
            renderTo: "#your-dom-id",
            appkey: "CF_APP_1",
            scene: "register",
            token: nc_token,
            customWidth: 250,
            trans:{"key1":"code0"},
            elementID: ["usernameID"],
            is_Opt: 0,
            language: "cn",
            isEnabled: true,
            timeout: 3000,
            times:5,
            apimap: {
                // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                // 'get_captcha': '//b.com/get_captcha/ver3',
                // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
                // 'get_img': '//c.com/get_img',
                // 'checkcode': '//d.com/captcha/checkcode.jsonp',
                // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
                // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                // 'umid_serUrl': 'https://g.com/service/um.json'
            },   
            callback: function call(data) { 
                window.console && console.log(nc_token);
                window.console && console.log(data.csessionid);
                window.console && console.log(data.sig);
                //在这里写滑动成功以后,可以做的事件,下面是我写的成功之后可以注册的语句,可以改成自己需要的
               /* var uname=checkName();
                var pwd=checkpwd();
                var apwd=checkapwd();
                if(uname&&pwd&&apwd){
                    document.getElementById("regist").disabled=""; 
                    return true;              
                } 
                else{
                    alert("答应我先填完资料ok?");
                    window.location.reload();
                    return false;
                }*/
                 }
                
            };
        var nc = new noCaptcha(NC_Opt);
        nc.upLang('cn', {
            _startTEXT: "请按住滑块,拖动到最右边",
            _yesTEXT: "验证通过",
            _error300: "哎呀,出错了,点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
            _errorNetwork: "网络不给力,请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
        });
</script>

完事!

  • 作者:悢七
  • 原文链接:https://blog.csdn.net/qq_44467720/article/details/106558563
    更新时间:2022-08-16 09:16:45