Bootstrap 模態框和表單驗證 bootstrap-validator

最近開發項目，爲了頁面比較簡潔美觀，因而引入了bootstrap，不得不說bootstrap封裝了不少東西，用起來很方便，在開發過程當中，我主要應用了 模態框 和 表單驗證 ，感受效果不錯，特此記錄備忘同時與你們分享一下。

Bootstrap 模態框

1.須要導入的文件

<script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css"/>

2.在頁面中，定義一個按鈕來觸發模態框

##  媒體建立 模態框  start
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form class="form-horizontal" role="form" method="post" id='formva' action = ''>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">建立媒體</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="mediaTypeM" class="col-sm-2 control-label">媒體類型</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="mediaTypeM" name="mediaTypeM">
                                <option value="1">PC</option>
                                <option value="2">WAP</option>
                                <option value="3">APP</option>
                            </select>
                        </div>
                    </div>   
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary" onclick="saveAppInfo()">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </form>
</div>
##  建立的模態框  end

3.調用方法

能夠在按鈕上，加上屬性直接觸發模態框的開啓關閉

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

也能夠用onclick方法，添加一個js函數來觸發

//開啓
function createAppInfo(){
        $("#myModal").modal('show');
     }
// 關閉
 $("#myModal").modal('hide');

Bootstrap-validator 表單驗證

1.須要導入的文件

<script src="jquery.min.js"></script>
<link rel="stylesheet" href="bootstrapValidator.min.css"/>
<script type="text/javascript" src="bootstrapValidator.min.js"></script>

2.須要給表單加上一個 ID=‘’formva」，用來讓bootstrap找到它，在頁面載入的時候，就開始加載這段js，頁面輸入框輸入的時候就開始判斷，bootstarp還有不少規則，能夠看下參考文章：http://www.cnblogs.com/huangcong/p/5335376.html

// bootstrap validator
$(document).ready(function() {
    $('#formva').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            campaignName2: {
                message: 'The campaignName2 is not valid',
                validators: {
                    notEmpty: {
                        message: 'The campaignName2 is required and can\'t be empty'
                    }
                }
            },
            budget: {
                message: 'The budget is not valid',
                validators: {
                    notEmpty: {
                        message: 'The budget is required and can\'t be empty'
                    },
                    stringLength: {
                        min: 1,
                        max: 10,
                        message: 'The budget must be more than 1 and less than 10 characters long'
                    },
			  numeric:{
   			 	message: 'The budget is required and can\'t be number'
			  },
			  regexp: {
    				regexp: /^([1-9]{1}[\d]{0,7}|0{1})(\.[\d]{1,2})?$/,
    				message: 'The budget can only consist of number, dot '
			  }
                }
            }
        }
    });
});

3.在form表單中，若是提交按鈕爲submit，那麼在點擊提交的時候就會提示沒有按照規則輸入的表單數據，不容許提交，若是不是submit了，會提示，可是一樣能夠提交。 當用js控制提交的時候，須要在提交以前，調用下bootstrap-validator。

// bootstrap 的 表單驗證
$('#formva').data('bootstrapValidator').validate();
if(!$('#formva').data('bootstrapValidator').isValid()){
    return false;
}

---

以上就是學習bootstrap的一點點記錄，防止本身忘記，以備不時之需。若是錯誤，請留言指正。