管理后台作为数据维护管理的中心,数据前后端的校验一定是不可缺少的。比较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即可
暂时就用到这些,官方的例子很全面,属性里面可以直接远程校验,校验密码是否一致等等,用起来很方便。