使用js实现网页验证码

Posted 2020-10-03 窗边冷月光

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

 

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>