zoukankan      html  css  js  c++  java
  • 使用js实现网页验证码

    简单易用,无需后台程序。

    HTML

    <div class="login-box-body">
                <p class="login-box-msg">请输入用户名和密码登陆</p>
                <form action="/bishop/sys/index" method="post" id="form">
                    <div class="form-group has-feedback" style="height: 50px;">
                        <input type="text" name="username" id="username"
                            class="form-control" placeholder="请输入用户名..."
                            onblur="validateUserName()"> <span
                            class="glyphicon glyphicon-envelope form-control-feedback"></span>
                        <label id="usernamel"> <font id="usernamef"
                            style="color: red;"></font>
                        </label>
                    </div>
                    <div class="form-group has-feedback" style="height: 50px;">
                        <input type="password" class="form-control" name="password"
                            id="password" placeholder="请输入密码..." onblur="validatePass()">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        <label id="passwordl"> <font id="passwordf"
                            style="color: red;"></font>
                        </label>
                    </div>
                    <div style="height: 70px;">
                        <div class="row form-group has-feedback">
                            <div class="col-xs-7" style="padding-right: 0px;">
                                <input type="text" class="form-control" maxlength="5" name="code"
                                    id="code" placeholder="请输入验证码..." onblur="validateCode()">
                            </div>
                            <div class="col-xs-4" onclick="createCode()"
                                style="background-color: olive; height: 34px;padding-right: 0px;line-height:34px;">
                                <a href="javascript:void(0);" id="discode"></a>
                            </div>
                        </div>
                        <div style="padding-top: 0px;margin-top: -10px;">
                            <label id="codel"> <font id="codef" style="color: red;"></font>
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12" align="center">
                            <button type="button" class="btn btn-primary" onclick="on()">登录</button>
                            &nbsp;&nbsp;
                            <button type="button" class="btn btn-primary" onclick="chonset()">重置</button>
                        </div>
                        <!-- /.col -->
                    </div>
                </form>
    
            </div>

    JS

    <script>
    function validateCode() {
                var code = $.trim($('#code').val());
                var discode = $.trim($('#discode').html());
                if (code == '') {
                    $('#codef').html('请输入验证码');
                    $('#codel').css('display', 'block');
                    return false;
                } else {
                    if (code.toUpperCase() != discode.toUpperCase()) {
                        $('#codef').html('验证码不正确');
                        $('#codel').css('display', 'block');
                        return false;
                    } else {
                        $('#codef').html('');
                        $('#codel').css('display', 'none');
                    }
                }
            }
            //生成验证码
            function createCode() { //创建验证码函数
                code = "";
                var codeLength = 5;//验证码的长度
                var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B',
                        'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
                        'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//所有候选组成验证码的字符,当然也可以用中文的
    
                for (var i = 0; i < codeLength; i++) {
                    var charIndex = Math.floor(Math.random() * 36);
                    code += selectChar[charIndex];
                }// 设置验证码的显示样式,并显示
                document.getElementById("discode").style.fontFamily = " Tahoma,Helvetica,Arial"; //设置字体
                document.getElementById("discode").style.letterSpacing = "10px"; //字体间距
                document.getElementById("discode").style.color = "#ff0000"; //字体颜色
                document.getElementById("discode").innerHTML = code; // 显示
            }
    
    </script>

    作者:何钊

    来源:博客园

    链接:http://www.cnblogs.com/hezhao/

    CSDN:http://blog.csdn.net/sinat_27403673

    简书:http://www.jianshu.com/u/5ae45d288275

    Email:hezhao_java@163.com

    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 相关阅读:
    coredump分析
    Sword LRU算法
    C++ STL迭代器失效问题
    Sword DB主从一致性的解决方法
    Sword CRC算法原理
    C语言 按位异或实现加法
    Linux 等待信号(sigsuspend)
    C语言 宏定义之可变参数
    Linux shell字符串操作
    C++ *和&
  • 原文地址:https://www.cnblogs.com/hezhao/p/7390731.html
Copyright © 2011-2022 走看看