Bootstrap 模态框和表单验证 bootstrap-validator

2019独角兽企业重金招聘Python工程师标准>>>

最近开发项目，为了页面比较简洁美观，于是引入了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的一点点记录，防止自己忘记，以备不时之需。如果错误，请留言指正。

转载于:https://my.oschina.net/u/2272597/blog/858680