jquery中用bootstrap中的表单验证及提交
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: '请输入申请人'
},
}
},
}
})
