使用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>