bootstrapvalidator是一款前端表单验证插件,基于bootstrap,所以要配合使用,此记录使用的版本是bootstrapvalidator v0.5.3
1,文件引入:
<link rel="stylesheet" href="../css/bootstrap.css"/>
<link rel="stylesheet" href="../css/bootstrapValidator.min.css" />
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrapValidator.min.js"></script>
2,进入页面后就要加载验证方法的绑定。
$(function () {
//使用bootstrap validator插件进行客户端数据校验
$('#frmAddSysuser').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: '用户姓名不能为空'
}
}
},
loginName: {
validators: {
notEmpty: {
message: '登录账号不能为空'
}
}
}
}
});
});
3,将插件与表单进行绑定,按钮的type必须是submit,设置为button无法使用验证插件。
<form id="frmAddSysuser">
<div class="form-group">
<label>用户姓名:</label>
<input type="text" class="form-control" name="name"/>
</div>
<div class="form-group">
<label>登录账号:</label>
<input type="text" class="form-control" name="loginName"/>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">添加</button>
</div>
</form>