引用
bootstrapvalidator是由nghuuphuoc开发的一个基于bootstrap的插件,用于表单的验证提示,比较好用。这里是他的GitHub: bootstrapvalidator.
这里要引用的资源主要在这两个文件夹下,dist目录下主要为bootstrapvalidator的css和js文件,vendor则为前置依赖的jQuery和Bootstrap的css、js文件。
这里有个大雷!!这里有个大雷!!这里有个大雷!!
就是这里在使用bootstrapvalidtor的时候引用bootstrap的资源的时候需要把bootstrap中的css样式、fonts、js中的所有文件拷贝到路径中,其中fonts必须拷贝过来,这里虽然在页面中没有显式引用,但是不放过来那么在页面最后的验证调用时代码可以执行,但最后表单是没办法正确展示提示语句的。
这里是bootstrap文件中的三个文件夹。
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="../../static/frontpage/bootstrap/css/bootstrap.css" th:href="@{/frontpage/bootstrap/css/bootstrap.css}">
<!-- bootstrap-validator css -->
<link rel="stylesheet" href="../../static/frontpage/dist/css/bootstrapValidator.css" th:href="@{/frontpage/dist/css/bootstrapValidator.css}" type="text/css">
<!-- jQuery -->
<script src="../../static/frontpage/js/jquery-2.1.1.js" th:src="@{/frontpage/js/jquery-2.1.1.js}"></script>
<!-- Core JavaScript Files -->
<script src="../../static/frontpage/bootstrap/js/bootstrap.min.js" th:src="@{/frontpage/bootstrap/js/bootstrap.min.js}"></script>
<!-- bootstrap-validator js -->
<script src="../../static/frontpage/dist/js/bootstrapValidator.js" th:src="@{/frontpage/dist/js/bootstrapValidator.js}"></script>
代码实现
<!-- login模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form id="loginForm" class="form-horizontal">
<div class="heading">用户登陆</div>
<div class="form-group">
<i class="fa fa-user"></i>
<input required="" name="username" type="text" class="form-control"
placeholder="用户名" id="exampleInputUsername">
</div>
<p name="login[tipname]" style="color: red;"></p>
<div class="form-group">
<i class="fa fa-lock"></i>
<input required="" name="password" type="password" class="form-control"
placeholder="密码">
</div>
<p name="login[tippasswd]" style="color: red;"></p>
<div class="form-group">
<button name="login[button]" class="btn btn-default"><i class="fa fa-arrow-right"></i>登陆</button>
<span>没有账户?<p id="openRegModel" class="create_account" style="cursor: pointer;">注册</a></span>
</div>
</form>
</div>
</div>
//验证规则
$("#loginForm").bootstrapValidator({
live: 'enabled',
message: '此值无效',
/* feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
}, */
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: '用户名为必选参数不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须大于6个字符小于30个字符'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名只能由字母、数字、点和下划线组成'
},
/* remote: {
type: 'POST',
url: 'remote.php',
message: 'The username is not available'
}, */
different: {
field: 'password,confirmPassword',
message: '用户名和密码不能重复'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码必须输入且不能为空'
},
identical: {
field: 'confirmPassword',
message: '密码和确认密码不一致'
},
different: {
field: 'username',
message: '密码不能和“用户名”相同'
}
}
}
}
})
//验证表单
$("button[name='login[button]']").click(function(e){
// flag = true/false
var flag = $("#loginForm").data("bootstrapValidator").isValid();
console.log(flag);
$("#loginForm").bootstrapValidator('validate');
});