天天看點
傳回

bootstrapValidator Form表單校驗效果圖完整代碼

Form 表單校驗（bootstrapValidator）

  • 引用 js 檔案（必須） 
<script type="text/javascript" src="/statics/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/statics/js/bootstrapValidator.min.js"></script>
  • Form 表單 
<form class="form-signin" id="loginForm" action="/login">
                            <h2 style="color: #dddddd;">管理者登入</h2>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon" >賬号</span>
                                    <input type="text" class="form-control" name="loginAccount" placeholder="請輸入賬号/使用者名" aria-describedby="basic-addon1">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon" >密碼</span>
                                    <input type="password" class="form-control" name="password" placeholder="請輸入密碼" aria-describedby="basic-addon1">
                                </div>
                            </div>
                            <br>
                            <button class="btn btn-lg btn-primary btn-block" type="submit" >登入</button>
                        </form>
  • 設定校驗邏輯 
$(function() {
        $('#loginForm')//登入
            .bootstrapValidator({
                message: '登入校驗',
                feedbackIcons: {
                    /*input狀态樣式圖檔*/
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    /*驗證：規則*/
                    loginAccount: {//驗證input項：驗證規則
                        message: '登入賬号驗證',
                        threshold : 2 , //有2字元以上才發送ajax請求，（input中輸入一個字元，插件會向伺服器發送一次，設定限制，6字元以上才開始）
                        validators: {
                            notEmpty: {//非空驗證：提示消息
                                message: '賬号/使用者名不能為空'
                            },
                            stringLength: {
                                min: 2,
                                max: 20,
                                message: '賬号/使用者名長度必須在2到20之間'
                            },
                             remote: {//ajax驗證。server result:{"valid",true or false} 向服務發送目前input name值，獲得一個json資料。例表示正确：{"valid",true}
                                 url: '/checkAdmin',//驗證位址
                                 message: '使用者不存在',//提示消息
                                 delay :  1000,//每輸入一個字元，就發ajax請求，伺服器壓力還是太大，設定1秒發送一次ajax（預設輸入一個字元，送出一次，伺服器壓力太大）
                                 type: 'POST',//請求方式
                                 data:function(){
                                     return {
                                         loginAccount: $("#loginForm input[name='loginAccount']").val(),
                                         loginName: $("#loginForm input[name='loginAccount']").val()
                                     }
                                 }
                             },
                            regexp: {
                                regexp: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
                                message: '賬号/使用者名由數字、字母、漢字組成'
                            }
                        }
                    },
                    password: {
                        message: '密碼無效',
                        validators: {
                            notEmpty: {
                                message: '密碼不能為空'
                            },
                            stringLength: {
                                min: 6,
                                max: 20,
                                message: '使用者名長度必須在6到20之間'
                            },
                            identical: {//相同
                                field: 'password', //需要進行比較的input name值
                                message: '兩次密碼不一緻'
                            },
                            different: {//不能和使用者名相同
                                field: 'username',//需要進行比較的input name值
                                message: '不能和使用者名相同'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '密碼由數字字母下劃線和.組成'
                            }
                        }
                    }
                }
            })
            .on('success.form.bv', function (e) {//點選送出之後
                //密碼加密
                var password = $('#loginForm input[name=password]').val();
                $('#loginForm input[name=password]').val($.md5(password))
                // 終止重複送出
                e.preventDefault();
                // 得到form表單對象
                var $form = $(e.target);
                // 獲得bootstrap驗證對象
                var bv = $form.data('bootstrapValidator');
                // Use Ajax to submit form data 送出至form标簽中的action，result自定義
                $.post($form.attr('action'), $form.serialize(), function (data) {
                    layer.msg(data.msg);
                    if(data.code == 1){
                        common.method.GoUrl("/page/base");
                    }else{
                        $('#loginForm button[type=submit]').attr("disabled",false);
                    }
                });
            });

});

效果圖

  • 預設樣式
bootstrapValidator Form表單校驗效果圖完整代碼
  • 校驗效果（校驗不通過時登入按鈕不可點選）
bootstrapValidator Form表單校驗效果圖完整代碼
  • 校驗成功（成功以後登入按鈕才可以點選）
bootstrapValidator Form表單校驗效果圖完整代碼

  • 完整代碼 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>背景管理系統</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <script type="text/javascript" src="/statics/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/statics/js/md5.js"></script>
    <script type="text/javascript" src="/statics/js/bootstrapValidator.min.js"></script>
    <script type="text/javascript" src="/statics/layer-v3.1.1/layer/layer.js"></script>
    <script type="text/javascript" src="/statics/js/common.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
    <link rel="stylesheet" href="/statics/css/bootstrap.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >
    <!-- 可選的 Bootstrap 主題檔案（一般不用引入） -->
    <link rel="stylesheet" href="/statics/css/bootstrap-theme.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >
    <!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
    <script src="/statics/js/bootstrap.min.js" ></script>
</head>
<body style="background: black url(../statics/images/login.jpg) no-repeat fixed top;" >
    <div class="container" style="padding-top:10%;">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6" >
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#login" target="_blank" rel="external nofollow"  aria-controls="login" role="tab" data-toggle="tab">賬号登入</a></li>
                    <li role="presentation"><a href="#region" target="_blank" rel="external nofollow"  aria-controls="region" role="tab" data-toggle="tab">申請賬号</a></li>
                    <li role="presentation"><a href="#regionInfo" target="_blank" rel="external nofollow"  aria-controls="regionInfo" role="tab" data-toggle="tab">申請資訊查詢</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="login">
                        <form class="form-signin" id="loginForm" action="/login">
                            <h2 style="color: #dddddd;">管理者登入</h2>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon" >賬号</span>
                                    <input type="text" class="form-control" name="loginAccount" placeholder="請輸入賬号/使用者名" aria-describedby="basic-addon1">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon" >密碼</span>
                                    <input type="password" class="form-control" name="password" placeholder="請輸入密碼" aria-describedby="basic-addon1">
                                </div>
                            </div>
                            <br>
                            <button class="btn btn-lg btn-primary btn-block" type="submit" >登入</button>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="region">
                        <form class="form-signin" id="regionForm" action="/region">
                            <h2  style="color: #dddddd;">管理者申請</h2>
                            <div class="row">
                                <div class="col-sm-1"></div>
                                <div class="col-sm-10">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"  >名稱</span>
                                            <input type="text" class="form-control" name="loginName" placeholder="請輸入使用者名" aria-describedby="basic-addon1">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon" style="color: red" >賬号</span>
                                            <input type="number" class="form-control" name="loginAccount" placeholder="請輸入登入賬号" aria-describedby="basic-addon1">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon" style="color: red" >密碼</span>
                                            <input type="password" class="form-control" name="password" placeholder="請輸入登入密碼" aria-describedby="basic-addon1">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon" >昵稱</span>
                                            <input type="text" class="form-control" name="name" placeholder="請輸入昵稱" aria-describedby="basic-addon1">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon" >年齡</span>
                                                    <input type="number" class="form-control"  name="age"  min="0" max="120"/>
                                                </div>
                                            </div>
                                        </div><!-- /.col-lg-6 -->
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon" >性别</span>
                                                    <input type="text" id="sex" class="form-control" placeholder="請選擇性别" readonly="readonly" aria-label="...">
                                                    <input type="hidden" name="sex"/>
                                                    <div class="input-group-btn">
                                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">請選擇 <span class="caret"></span></button>
                                                        <ul class="dropdown-menu dropdown-menu-right">
                                                            <li><a sex="true" onclick="$('input[name=sex]').val('true');$('#sex').val('男')">男</a></li>
                                                            <li role="separator" class="divider"></li>
                                                            <li><a sex="false" onclick="$('input[name=sex]').val('false');$('#sex').val('女')">女</a></li>
                                                        </ul>
                                                    </div><!-- /btn-group -->
                                                </div><!-- /input-group -->
                                            </div>
                                        </div><!-- /.col-lg-6 -->
                                    </div><!-- /.row -->
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-lg-12" >
                                                <textarea name="infoContent" rows="5" style="width: 100%;" placeholder="注冊申請消息，管理者看到後會盡快給您審批通過的！！！"></textarea>
                                            </div><!-- /.col-lg-6 -->
                                        </div>
                                    </div>

                                    <br>
                                    <button class="btn btn-lg btn-primary btn-block" type="submit" >送出</button>
                                    <br><br>
                                    <br><br>
                                </div>
                                <div class="col-sm-1"></div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="regionInfo">
                        <form class="form-signin" >
                            <h2 style="color: #dddddd;">申請資訊查詢</h2>
                            <div class="input-group">
                                <span class="input-group-addon"  >請輸入查詢賬号</span>
                                <input type="text" class="form-control" id="searchRegionInfo" placeholder="請輸入查詢賬号...">
                                <span class="input-group-btn"><button class="btn btn-default" id="searchRegionBut" type="button">搜尋</button></span>
                            </div>
                            <br>
                            <div class="form-group" style="color: #dddddd;display: none;" id="listInfo">
                                <table class="table table-striped table-bordered row" style="margin-left: 0px;"  >
                                    <thead>
                                    <tr>
                                        <th >申請時間</th>
                                        <th >申請标題</th>
                                        <th >申請内容</th>
                                        <th >申請狀态</th>
                                    </tr>
                                    </thead>
                                    <tbody id="listItem">

                                    </tbody>
                                </table>
                            </div>
                            <br>
                            <br>
                        </form>

                    </div>
                </div>


            </div>
            <div class="col-md-3"></div>
        </div>
    </div>
</body>
<script>
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        e.target // newly activated tab
        e.relatedTarget // previous active tab
    })
    $("#searchRegionBut").click(function () {
        var regionInfo = $("#searchRegionInfo").val().trim();
        if(regionInfo != null && regionInfo != ""){
            $.ajax({
                url:"/serchRegionInfo",
                data:{loginAccount:regionInfo},
                success:function (data) {
                    layer.msg(data.msg);
                    if(data.code == 1){
                        $("#listInfo").show();
                        $("#listItem").empty();
                        $.each(data.data,function (i,t) {
                            var str = getDateToString(new Date( t.sendTime*1 ));
                            $("#listItem").append('<tr>\n' +
                                '                                            <th class="min-mobile-l col-sm-2" data-date-format="yyyy-mm-dd">'+str+'</th>\n' +
                                '                                            <th class="min-mobile-l col-sm-3">'+t.title+'</th>\n' +
                                '                                            <th class="min-mobile-l col-sm-5">'+t.content+'</th>\n' +
                                '                                            <th class="min-mobile-l col-sm-2">'+(t.isRead?'待審批':'未讀')+'</th>\n' +
                                '                                        </tr>')
                        })
                    }else{
                        $("#listInfo").hide();
                    }
                }
            })
        }else{
            layer.msg("請輸入要查詢的新增賬號！！！")
        }
    })

    function getDateToString(date){
        return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " + date.getHours() + "時" + date.getMinutes() + "分" + date.getSeconds() + "秒";
    }

    $(function() {
        $('#loginForm')//登入
            .bootstrapValidator({
                message: '登入校驗',
                feedbackIcons: {
                    /*input狀态樣式圖檔*/
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    /*驗證：規則*/
                    loginAccount: {//驗證input項：驗證規則
                        message: '登入賬号驗證',
                        threshold : 2 , //有2字元以上才發送ajax請求，（input中輸入一個字元，插件會向伺服器發送一次，設定限制，6字元以上才開始）
                        validators: {
                            notEmpty: {//非空驗證：提示消息
                                message: '賬号/使用者名不能為空'
                            },
                            stringLength: {
                                min: 2,
                                max: 20,
                                message: '賬号/使用者名長度必須在2到20之間'
                            },
                             remote: {//ajax驗證。server result:{"valid",true or false} 向服務發送目前input name值，獲得一個json資料。例表示正确：{"valid",true}
                                 url: '/checkAdmin',//驗證位址
                                 message: '使用者不存在',//提示消息
                                 delay :  1000,//每輸入一個字元，就發ajax請求，伺服器壓力還是太大，設定1秒發送一次ajax（預設輸入一個字元，送出一次，伺服器壓力太大）
                                 type: 'POST',//請求方式
                                 data:function(){
                                     return {
                                         loginAccount: $("#loginForm input[name='loginAccount']").val(),
                                         loginName: $("#loginForm input[name='loginAccount']").val()
                                     }
                                 }
                             },
                            regexp: {
                                regexp: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
                                message: '賬号/使用者名由數字、字母、漢字組成'
                            }
                        }
                    },
                    password: {
                        message: '密碼無效',
                        validators: {
                            notEmpty: {
                                message: '密碼不能為空'
                            },
                            stringLength: {
                                min: 6,
                                max: 20,
                                message: '使用者名長度必須在6到20之間'
                            },
                            identical: {//相同
                                field: 'password', //需要進行比較的input name值
                                message: '兩次密碼不一緻'
                            },
                            different: {//不能和使用者名相同
                                field: 'username',//需要進行比較的input name值
                                message: '不能和使用者名相同'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '密碼由數字字母下劃線和.組成'
                            }
                        }
                    }
                }
            })
            .on('success.form.bv', function (e) {//點選送出之後
                //密碼加密
                var password = $('#loginForm input[name=password]').val();
                $('#loginForm input[name=password]').val($.md5(password))
                // 終止重複送出
                e.preventDefault();
                // 得到form表單對象
                var $form = $(e.target);
                // 獲得bootstrap驗證對象
                var bv = $form.data('bootstrapValidator');
                // Use Ajax to submit form data 送出至form标簽中的action，result自定義
                $.post($form.attr('action'), $form.serialize(), function (data) {
                    layer.msg(data.msg);
                    if(data.code == 1){
                        common.method.GoUrl("/page/base");
                    }else{
                        $('#loginForm button[type=submit]').attr("disabled",false);
                    }
                });
            });




        $('#regionForm')//注冊
            .bootstrapValidator({
                message: '登入校驗',
                feedbackIcons: {/*input狀态樣式圖檔*/
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {/*驗證：規則*/
                    loginName: {//驗證input項：驗證規則
                        message: '使用者名異常',
                        threshold :  2 , //有6字元以上才發送ajax請求，（input中輸入一個字元，插件會向伺服器發送一次，設定限制，6字元以上才開始）
                        validators: {
                            stringLength: {
                                min: 2,
                                max: 20,
                                message: '使用者名長度必須在2到20之間'
                            },
                            remote: {//ajax驗證。server result:{"valid",true or false} 向服務發送目前input name值，獲得一個json資料。例表示正确：{"valid",true}
                                url: '/checkAdmin',//驗證位址
                                message: '使用者已存在',//提示消息
                                delay :  1000,//每輸入一個字元，就發ajax請求，伺服器壓力還是太大，設定1秒發送一次ajax（預設輸入一個字元，送出一次，伺服器壓力太大）
                                type: 'POST',//請求方式
                                data:function(){
                                    return {
                                        loginName: $("#regionForm input[name='loginName']").val(),
                                        isLogin:false
                                    }
                                }
                            },
                            regexp: {
                                regexp: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
                                message: '使用者名由數字、字母、漢字組成'
                            }
                        }
                    },
                    loginAccount: {//驗證input項：驗證規則
                        message: '登入賬号驗證',
                        threshold :  2 , //有2字元以上才發送ajax請求，（input中輸入一個字元，插件會向伺服器發送一次，設定限制，6字元以上才開始）
                        validators: {
                            notEmpty: {//非空驗證：提示消息
                                message: '賬号/使用者名不能為空'
                            },
                            stringLength: {
                                min: 2,
                                max: 20,
                                message: '賬号/使用者名長度必須在2到20之間'
                            },
                            remote: {//ajax驗證。server result:{"valid",true or false} 向服務發送目前input name值，獲得一個json資料。例表示正确：{"valid",true}
                                url: '/checkAdmin',//驗證位址
                                message: '使用者已存在',//提示消息
                                delay :  1000,//每輸入一個字元，就發ajax請求，伺服器壓力還是太大，設定1秒發送一次ajax（預設輸入一個字元，送出一次，伺服器壓力太大）
                                type: 'POST',//請求方式
                                data:function(){
                                    return {
                                        loginAccount: $("#regionForm input[name='loginAccount']").val(),
                                        isLogin:false
                                    }
                                }
                            },
                            regexp: {
                                regexp: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
                                message: '賬号/使用者名由數字、字母、漢字組成'
                            }
                        }
                    },
                    password: {
                        message: '密碼無效',
                        validators: {
                            notEmpty: {
                                message: '密碼不能為空'
                            },
                            stringLength: {
                                min: 6,
                                max: 20,
                                message: '使用者名長度必須在6到20之間'
                            },
                            identical: {//相同
                                field: 'password', //需要進行比較的input name值
                                message: '兩次密碼不一緻'
                            },
                            different: {//不能和使用者名相同
                                field: 'username',//需要進行比較的input name值
                                message: '不能和使用者名相同'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '密碼由數字字母下劃線和.組成'
                            }
                        }
                    },
                    name: {
                        validators: {
                            stringLength: {
                                min: 1,
                                max: 20,
                                message: '使用者名長度必須在1到20之間'
                            }
                        }
                    },
                    age: {
                        validators: {
                            regexp: {
                                regexp: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/,
                                message: '年齡範圍為1-120'
                            }
                        }
                    }
                }
            })
            .on('success.form.bv', function(e) {//點選送出之後
                //密碼加密
                var password = $('#regionForm input[name=password]').val();
                $('#regionForm input[name=password]').val($.md5(password))
                // 終止重複送出
                e.preventDefault();
                // 得到form表單對象
                var $form = $(e.target);
                // 獲得bootstrap驗證對象
                var bv = $form.data('bootstrapValidator');
                // Use Ajax to submit form data 送出至form标簽中的action，result自定義
                $.post($form.attr('action'), $form.serialize(), function(data) {
                    layer.msg(data.msg);
                });
            });
    });


</script>
</html>

解釋一下 

md5.js
           
//密碼加密
                var password = $('#loginForm input[name=password]').val();
                $('#loginForm input[name=password]').val($.md5(password))
頁面密碼加密傳輸 
layer.js
bootstrapValidator Form表單校驗效果圖完整代碼
友好型提示 
bootstrapValidator.min.js
bootstarp的校驗插件，詳見上文
  • 本頁面是基于bootstarp做的，是以要引入bootstarp的js和css才可以出來一上效果
  • 所有外部檔案(common.js 是自己定義的，這個可以不要) 
<script type="text/javascript" src="/statics/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/statics/js/md5.js"></script>
    <script type="text/javascript" src="/statics/js/bootstrapValidator.min.js"></script>
    <script type="text/javascript" src="/statics/layer-v3.1.1/layer/layer.js"></script>
    <script type="text/javascript" src="/statics/js/common.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
    <link rel="stylesheet" href="/statics/css/bootstrap.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >
    <!-- 可選的 Bootstrap 主題檔案（一般不用引入） -->
    <link rel="stylesheet" href="/statics/css/bootstrap-theme.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >
    <!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
    <script src="/statics/js/bootstrap.min.js" ></script>
前端 bootstrapValidator form表單校驗 登入功能 bootstarp登入 表單校驗
上一篇: element學習：form表單的校驗
下一篇: uniapp form表單validator函數校驗

繼續閱讀