BootStrapValidator表單驗證外掛的學習和使用

阿新 • • 發佈：2020-08-26

BootStrapValidator表單驗證外掛的學習和使用

引入標籤

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
//--------------------------------下方都是bootstrap的基本依賴-----------------------
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
   
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

html

<div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
    <form class="form-horizontal" method="post" action="" id="classes-form">
        <!--第一個數值驗證-->
        <div class="box-body">
            <div class="form-group">
                <label for="inputName1" class="col-sm-2 col-sm-offset-1 control-label">商品價格</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="price" id="inputName1"
                           placeholder="請輸入商品價格">
                </div>
            </div>
        </div>
        <!--第二個 數值範圍驗證-->
        <div class="box-body">
            <div class="form-group">
                <label for="inputName2" class="col-sm-2 col-sm-offset-1 control-label">最大最小值</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="max_num" id="inputName2"
                           placeholder="請輸入10-100之間的值">
                </div>
            </div>
        </div>
    </form>
</div>

js驗證

    <script>
        $(function () {


            $('#classes-form').bootstrapValidator({
                live : 'enabled', //enabled代表當表單控制元件內容發生變化時就觸發驗證，預設提交時驗證，
                // disabled和submitted代表當點選提交按鈕時觸發驗證

                feedbackIcons: {  //顯示錶單驗證結果的圖示
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    // 第一個驗證
                    price: {
                        validators: {
                            numeric: {
                                message: '價格必須為數值'
                            }
                        }
                    },
                    // 第二個驗證
                    max_num: {
                        validators: {
                            lessThan: { //最大值驗證
                                value: 100,
                                inclusive: false, //是否包含當前值，false不包含，true包含。預設為true
                                message: '值不能大於或等於100'
                            },
                            greaterThan: {  //最小值驗證
                                value: 10,
                                inclusive: true,
                                message: '值不能小於10'
                            }
                        }
                    }
                }
            });


        });


    </script>

注意點：

<div class="form-group"></div> 來包裹才可以生效

整體程式碼，複製即可用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸介面</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script>
        $(function () {


            $('#classes-form').bootstrapValidator({
                live : 'enabled', //enabled代表當表單控制元件內容發生變化時就觸發驗證，預設提交時驗證，
                // disabled和submitted代表當點選提交按鈕時觸發驗證

                feedbackIcons: {  //顯示錶單驗證結果的圖示
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    // 第一個驗證
                    price: {
                        validators: {
                            numeric: {
                                message: '價格必須為數值'
                            }
                        }
                    },
                    // 第二個驗證
                    max_num: {
                        validators: {
                            lessThan: { //最大值驗證
                                value: 100,
                                inclusive: false, //是否包含當前值，false不包含，true包含。預設為true
                                message: '值不能大於或等於100'
                            },
                            greaterThan: {  //最小值驗證
                                value: 10,
                                inclusive: true,
                                message: '值不能小於10'
                            }
                        }
                    }
                }
            });


        });


    </script>
</head>
<body>


<div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
    <form class="form-horizontal" method="post" action="" id="classes-form">
        <!--第一個數值驗證-->
        <div class="box-body">
            <div class="form-group">
                <label for="inputName1" class="col-sm-2 col-sm-offset-1 control-label">商品價格</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="price" id="inputName1"
                           placeholder="請輸入商品價格">
                </div>
            </div>
        </div>
        <!--第二個 數值範圍驗證-->
        <div class="box-body">
            <div class="form-group">
                <label for="inputName2" class="col-sm-2 col-sm-offset-1 control-label">最大最小值</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" name="max_num" id="inputName2"
                           placeholder="請輸入10-100之間的值">
                </div>
            </div>
        </div>
    </form>
</div>

</body>
</html>

BootStrapValidator表單驗證外掛的學習和使用

BootStrapValidator表單驗證外掛的學習和使用引入標籤 <script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js">