bootstrapValidator表單驗證插件

時間 2019-11-17

標籤 bootstrapvalidator 表單驗證插件欄目 HTML 简体版

原文原文鏈接

bootstrapValidator——一個很好用的表單驗證插件，不再用手寫驗證規則啦！javascript

bootstrapValidator官方文檔： http://bootstrapvalidator.votintsev.ru/api/css

1、舉個麗子：

寫了一個小例子html

先來看一下效果吧！java

預覽效果查看源碼

2、具體實現步驟以下：

一、下載jquery、bootstrap、bootstrapValidatorjquery

bootstrapValidator下載地址： https://github.com/nghuuphuoc/bootstrapvalidator/commit/c023475236f66baab72975887a26e51d65df72f7git

在這裏下載後，解壓bootstrapValidator-master，裏面會有jquery、bootstrap、bootstrapValidator。其中bootstrap和jquery在vendor文件夾中，bootstrapValidator在src文件夾中。直接複製過來用就能夠了，不用單獨一個一個下載。在demo文件夾中有不少例子，能夠直接拿過來用。github

注意：若是bootstrap或jquery是單獨下載的，可能會由於版本不一致，致使驗證時，不會實時更新狀態，最好使用下載後bootstrapValidator-master中的jquery和bootstrap。bootstrap

二、將jquery、bootstrap、bootstrapValidator引入到文件中(注意引入的順序)api

三、編寫html、css、jside

3、下面來介紹我本身寫的小例子

寫了一個註冊表單，其中：

一、用戶名必須輸入漢字；

二、密碼和確認輸入的必須一致，長度爲6-16位；

三、手機號必須爲數字，且是正確的手機號。不知足以上條件會有相應的提示。

4、代碼實現：

一、html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>bootstrapValidatorDemo</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrapValidator/bootstrapValidator.min.css">
    <script type="text/javascript" src="js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrapValidator/bootstrapValidator.min.js"></script>
    
</head>
<body>
    <div class="container">
        <div class="row">
            <h2 class="title">用戶註冊</h2>
        </div>        
        <form id="infoForm" class="form-horizontal bv-form" enctype="multipart/form-data">
            <div class="row form-group">
                <label>用戶名:</label>
                <input type="text" class="form-control" name="username" placeholder="請輸入用戶名"></input>
            </div>
            <div class="row form-group">
                <label>密碼:</label>
                <input type="password" class="form-control" name="password" placeholder="請輸入密碼"></input>
            </div>
            <div class="row form-group">
                <label>確認密碼:</label>
                <input type="password" class="form-control" name="confirmPassword" placeholder="請確認密碼"></input>
            </div>
            <div class="row form-group">
                <label>手機號:</label>
                <input type="text" class="form-control" name="tel" placeholder="請輸入手機號"></input>
            </div>
            <div class="row form-group" style="display: flex; justify-content: space-around;">
                <button type="submit" class="btn btn-info" id="submit">提 交</button>
                <button class="btn btn-default" id="reset">重 置</button>
            </div>
        </form>        
    </div>
</body>
</html>

二、css

<style type="text/css">
    .container {
        margin-top: 30px;
        width: 500px;
    }
    .title {
        font-weight: 700;
        text-align: center;
        margin-bottom: 30px;
    }
</style>

三、js

<script type="text/javascript">
    $('#reset').click(function(e){
        e.preventDefault();//阻止默認事件
        $('#infoForm input').val('');
        $('#infoForm').data('bootstrapValidator').resetForm();
    });
    $('#infoForm').bootstrapValidator({
        message : '輸入的值無效!',
        feedbackIcons : {
            valid : 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating : 'glyphicon glyphicon-refresh'
        },
        fields : {
            username : {
                validators : {
                    notEmpty : {
                        message : '用戶名不能爲空！'
                    },
                    regexp : {
                        regexp : /[\u4E00-\u9FA5]/,
                        message : '請輸入漢字！'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密碼不能爲空！'
                    },
                    different: {
                        field: 'username',
                        message: '密碼不能與用戶名相同！'
                    },
                    stringLength: {
                        min: 6,
                        max: 16,
                        message: '密碼長度爲6~16位！'
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: '請確認密碼！'
                    },
                    identical: {
                        field: 'password',
                        message: '密碼和確認密碼不一致！'
                    }
                }
            },
            tel : {
                validators : {
                    notEmpty : {
                        message : '手機號不能爲空！'
                    },
                    regexp : {
                        regexp : /^1[34578]\d{9}$/,
                        message : '請輸入正確的手機號！'
                    },
                    stringLength: {
                        min: 11,
                        max: 11,
                        message: '請輸入11位手機號碼！'
                    }
                }
            }
        }
    }).on("success.form.bv", function(e) {
        e.preventDefault();//阻止默認事件
        alert('用戶註冊成功！');
    })
</script>

5、須要注意的地方：

一、jquery、bootstrap、bootstrapValidator最好使用下載的bootstrapValidator-mastar中的文件，不然可能會致使驗證狀態不會實時更新

二、表單中須要驗證的元素都必須包裹在有類名form-group的父盒子中，不然驗證不起做用

三、驗證的圖標

這部分是驗證時的圖標，也能夠不加這部分，若是加了，須要將bootstrapValidator-master --> vendor --> fonts文件夾複製到本身的文件目錄中，與bootstrap.css的父級同級

這樣圖標就會顯示出來了。

6、bootstrapValidator經常使用方法：

1. 重置表單 resetForm(),將隱藏全部錯誤提示和圖標。

   $(form).data("bootstrapValidator").resetForm();


2. 移除驗證項 removeField

   $(form).bootstrapValidator('removeField','ifLift');


3. 添加驗證項 addField
   $(form).bootstrapValidator("addField", "ifLift", {

       validators: {
           notEmpty: {
               message: '電梯不能爲空！'
           }
       }
   });


4. 表單驗證的字段是否都已經過驗證 isValid()，經過返回true,不然返回false

   $(form).data('bootstrapValidator').isValid()


5. 手動對錶單進行校驗validate(), 可用在須要點擊按鈕或者連接而非提交對錶單進行校驗的時候。

   $(form).data('bootstrapValidator').isValid()

6. 更新某個字段的狀態 updateStatus()，BootstrapValidator默認在校驗某個字段合法後再也不從新校驗，當調用其餘插件或者方法可能會改變字段值時，須要從新對該字段進行校驗。

7. 對指定的字段進行校驗。validateField(field)

   $(form).data("bootstrapValidator").updateStatus("square",  "NOT_VALIDATED",  null ).validateField('square');

NOT_VALIDATED 未校驗的
VALIDATING 覈驗中的
INVALID 校驗失敗的
VALID 校驗成功的

若是對您有幫助，記得點贊哦！須要您的支持與鼓勵，同時也歡迎您留下寶貴意見！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。