Bootstrap：bootstrapValidator表单自定义验证
实例:
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html>
<head>
<title>11</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="static/vendors/bootstrapvalidator/css/bootstrapValidator.css">
<link type="text/css" rel="stylesheet" href="static/vendors/bootstrap/css/bootstrap.css">
</head>
<body>
<div class="container">
<br>
<form class="form-horizontal" role="form" id="form-test">
<div class="form-group">
<label for="username" class="col-sm-1 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" name="username" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-1 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="repassword" class="col-sm-1 control-label">确认密码</label>
<div class="col-sm-10">
<input type="repassword" class="form-control" id="repassword" name="repassword" placeholder="请输入确认密码">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-1 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<button type="submit" class="btn btn-default" id="btn-test">登录</button>
</div>
</div>
</form>
</div>
</body>
<script src="static/vendors/jquery/js/jquery.min.js"></script>
<script src="static/vendors/bootstrapvalidator/js/bootstrapValidator.js"></script>
<script src="static/vendors/bootstrap/js/bootstrap.js"></script>
<script>
$(function () {
$("#form-test").bootstrapValidator({
live: \'enabled\',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
excluded: [\':disabled\', \':hidden\', \':not(:visible)\'],//排除无需验证的控件，比如被禁用的或者被隐藏的
submitButtons: \'#btn-test\',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
message: \'通用的验证失败消息\',//好像从来没出现过
feedbackIcons: {//根据验证结果显示的各种图标
valid: \'glyphicon glyphicon-ok\',
invalid: \'glyphicon glyphicon-remove\',
validating: \'glyphicon glyphicon-refresh\'
},
fields: {
email: {
validators: {
emailAddress: {//验证email地址
message: \'不是正确的email地址\'
},
notEmpty: {//检测非空
message: \'请输入邮箱\'
},
}
},
password: {
validators: {
notEmpty: {//检测非空
message: \'请输入密码\'
},
}
},
repassword: {
validators: {
notEmpty: {//检测非空
message: \'请输入确认密码\'
},
identical: {//与指定控件内容比较是否相同，比如两次密码不一致
field: \'password\',//指定控件name
message: \'两次输入的密码不同\'
},
}
},
username: {
validators: {
notEmpty: {//检测非空,radio也可用
message: \'请输入用户名\'
},
stringLength: {//检测长度
min: 3,
max: 10,
message: \'长度必须在3-10之间\'
},
regexp: {//正则验证
regexp: /^[a-zA-Z0-9_\.]+$/,
message: \'所输入的字符不符要求\'
},
}
}
}
});
function showToast(msg,shortCutFunction)
{
toastr.options = {
"closeButton": true,
"debug": false,
"progressBar": true,
"positionClass": "toast-bottom-right",
"onclick": null,
"showDuration": "400",
"hideDuration": "1000",
"timeOut": "7000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
toastr[shortCutFunction](msg,"提示");
}
$("#btn-test").click(function () {//非submit按钮点击后进行验证，如果是submit则无需此句直接验证
$("#form-test").bootstrapValidator(\'validate\');//提交验证
if ($("#form-test").data(\'bootstrapValidator\').isValid()) {//获取验证结果，如果成功，执行下面代码
showToast("2345678","error");
alert("yes");//验证成功后的操作，如ajax
}
});
});
</script>
$(\'#forms\').bootstrapValidator({ // excluded: [\':disabled\', \':hidden\', \':not(:visible)\'],//排除无需验证的控件，比如被禁用的或者被隐藏的 message: \'通用的验证失败消息\',//好像从来没出现过 feedbackIcons: {//根据验证结果显示的各种图标 valid: \'glyphicon glyphicon-ok\', invalid: \'glyphicon glyphicon-remove\', validating: \'glyphicon glyphicon-refresh\' }, fields: { licName: { validators: { regexp: {//正则验证 regexp: /^[\u4E00-\u9FA5]{2,5}[0-9]{8}$/, // 表示2-5个汉子加8位数字
\'请输如查桂峰10035608,您输入有误!\' }, notEmpty: {//检测非空 message: \'请输入申请人\' }, } }, } })