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

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

  • 相关阅读:
    .NET开发人员遇到Maven
    基于VS Code创建Java command-line app
    IntelliJ IDEA连接TFS local workspace无法正常签入
    Xcode连接TFS Git用户名和密码不正确解决方案
    Fiddler如何捕捉DefaultHttpClient的HTTP请求
    IIS 6的日志time-taken字段没有值的解决方案
    简单的音乐轮播JS
    SpringCloud分布式开发理解
    SpringCloud分布式开发五大神兽
    socket长连接和短链接区别
  • 原文地址:https://www.cnblogs.com/hezhao/p/7390731.html
Copyright © 2011-2022 走看看