【前端组件】bootstrapValidator表单验证组件实践
bootstrapValidator表单验证组件实践
最近学习了一个表单验证的组件，基于jquery,bootstrap数据验证插件bootstrapValidator，做的项目是基于bootstrap，和jQuery，所以就选择了和这俩个框架完美兼容的bootstrapValidator，英文的api http://bv.doc.javake.cn/api/ 下面就简单介绍一下应用过程。
第一步，引入库文件
需要引用css：bootstrap.min.css
bootstrapValidator.min.css
需要引用js:jquery-1.10.2.min.js
bootstrap.min.js
bootstrapValidator.min.js
第二步，前端form代码
这是一个完整的form，其中最后的提交button要写在form标签里面，我一开始写在外面，达不到置灰的效果。
<form id="form-admin" class="form-horizontal form-admin">
<div class="form-group adminname">
<label class="col-sm-3 control-label">用户名</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="adminname" placeholder="请输入用户名">
</div>
</div>
<div class="form-group role">
<label class="col-sm-3 control-label">管理员角色</label>
<div class="col-sm-8">
<select class="form-control" name="role">
<option value="0" selected>超级管理员</option>
<option value="1">普通管理员</option>
</select>
</div>
</div>
<div class="form-group describe">
<label class="col-sm-3 control-label">描述</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="describe" placeholder="请输入描述">
</div>
</div>
<div class="form-group statu">
<label class="col-sm-3 control-label">状态</label>
<div class="col-sm-8">
<select class="form-control" name="statu">
<option value="0" selected>启用</option>
<option value="1">禁用</option>
</select>
</div>
</div>
<div class="line"></div>
<div class="form-group origin-password">
<label class="col-sm-3 control-label">原密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" name="origin-password" placeholder="请输入原密码">
</div>
</div>
<div class="form-group password">
<label class="col-sm-3 control-label">新密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="new_password" name="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group confirm-password">
<label class="col-sm-3 control-label">确认新密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="confirm_password" name="confirm-password" placeholder="请输入确认密码">
<span id="confirm-new-password-tip"></span>
</div>
</div>
<div class="form-group limit-ip">
<label class="col-sm-3 control-label">限制IP</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="limit-ip" placeholder="请输入限制IP">
</div>
</div>
<div class="modal-footer no-padding-bottom">
<button name="submit" type="submit" id="btn-add-admin" class="btn btn-primary">提交</button>
<button name="submit" type="submit" id="btn-edit-admin" class="btn btn-info">提交</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</form>第三步，表单验证js
每个验证表单都是通过name属性找到的，其中mame名称已‘-’连接必须加引号，否则语法错误。
//表单验证
$(document).ready(function() {
$('.form-admin').bootstrapValidator({
feedbackIcons: {
valid: 'fa fa-check',
invalid: 'fa fa-remove',
validating: 'fa fa-refresh'
},
excluded: ':disabled',
fields: {
adminname: {
validators: {
notEmpty: {
message: '用户名不能为空'
},
regexp: {
regexp: /^([\w_]{5,16})$/,
message: '请输入5-16位数字或者字母'
},
}
},
'describe': {
validators: {
regexp: {
regexp: /^[\u4E00-\u9FA5\w_]*$/,
message: '请输入中文，数字或者字母'
},
}
},
'origin-password': {
validators: {
notEmpty: {
message: '原密码不能为空'
},
regexp: {
regexp: /^([\w_]{5,16})$/,
message: '请输入5-16位数字或者字母'
},
}
},
'password': {
validators: {
notEmpty: {
message: '新密码不能为空'
},
identical: {
field: 'confirm-password',
message: '两次密码必须相同'
},
regexp: {
regexp: /^([\w_]{5,16})$/,
message: '请输入5-16位数字或者字母'
},
}
},
'confirm-password': {
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: {
field: 'password',
message: '两次密码必须相同'
},
regexp: {
regexp: /^([\w_]{5,16})$/,
message: '请输入5-16位数字或者字母'
},
}
},
'limit-ip': {
validators: {
regexp: {
regexp: /^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3})$/,
message: '请输入IP地址'
},
}
}
}
})
});第四步，表单验证状态更新
我用的是模态框，所以每次打开都要更新验证状态，也就是重置，所以自己写的公用方法调用。
function resetFormVal(a){
var bv = $(a).data('bootstrapValidator');//api可以查到这个方法
bv.resetForm(true);
}
function validatorForm(a){
var bv = $(a).data('bootstrapValidator');//这个用作提交表单时的验证
if (bv.validate()) {
return true;
}else{
return false;
}
}第五步，看效果