ace 改写iframe布局 管理后台模板(二) 引入bootstrapvalidation 校验

管理后台作为数据维护管理的中心，数据前后端的校验一定是不可缺少的。比较jquery validation与bootstrap validation之后，决定用bootstrap进行校验。区别：一是框架本身采用bootstrap布局，二是日期校验，日期控件采用bootstrap-datepicker.min.js,与bootstrap validation 结合比较好，三是样式相对好一些，写法基本相似。
具体写法：

引入

在原有的main.css中加入：has-warning，has-error 部分的样式。如果并没有用到这个框架，直接引用bootstrap.css 的样式就可以了

先来一个校验的例子：

<input id="name" name="name" class="form-control" type="text" placeholder="请输入姓名" required data-bv-notempty-message="姓名不能为空" pattern="^[a-zA-Z0-9]+$" data-bv-regexp-message="姓名由数字字母组成" data-bv-stringlength="true" data-bv-stringlength-min="3" data-bv-stringlength-max="15" data-bv-stringlength-message="姓名3-15位">

required 要求必填
data-bv-notempty-message 必填的提示信息
pattern 校验的正则表达式
data-bv-regexp-message 不满足正则表达式的消息
data-bv-stringlength 要求长度 最小3，最大15及提示信息

<input class="form-control" placeholder="请输入Email地址"  name="email" type="email" data-bv-emailaddress-message="请输入有效的电子邮件地址" />

复选框例子

<input class="form-check-input" type="checkbox" name="protrol" required data-bv-message="用户协议必须选择" >我同意****

如果是日期类型，<div class="div-form-control" ><input class="form-control" id="demoDate" type="text" name="demoDate" required placeholder="请选择日期" required data-bv-notempty-message="日期不能为空"></div>
日期类型不会在选择日期后自动校验结果，需要增加代码：

$('#demoDate').datepicker({
        format: "yyyy-mm-dd",
        autoclose: true,
        todayHighlight: true
      }).on('hide',function(e) {                
                $('#registerForm').data('bootstrapValidator')
                    .updateStatus('demoDate', 'Valid')
                    .validateField('demoDate');                 
            });

注意：日期控件name与ID要保持一致，validateField应该取的是名字，日期控件用的是bootstrap-datepicker

如果是远程校验，则在表单属性中增加属性，data-bv-remote-url=”remote.php”　返回值为true或false即可

暂时就用到这些，官方的例子很全面，属性里面可以直接远程校验，校验密码是否一致等等，用起来很方便。