<script type="text/javascript"> $('form').bootstrapValidator({ //默认提示 message: 'This value is not valid', // 表单框里右侧的icon feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) { // 表单提交成功时会调用此方法 // validator: 表单验证实例对象 // form jq对象 指定表单对象 // submitButton jq对象 指定提交按钮的对象 }, fields: { username: { message: '用户名验证失败', validators: { notEmpty: { //不能为空 message: '用户名不能为空' }, remote: { //后台验证，比如查询用户名是否存在 url: 'student/verifyUsername', message: '此用户名已存在' } } } } }); </script>
后台验证返回格式必须为{“valid”, true or false} 的json数据格式。后台verifyUsername验证判断方法。
@RequestMapping(value="/verifyUsername") @ResponseBody public Map verifyUsername(String username){ Student stu = studentService.findByUsername(username); Map map = new HashMap(); if (stu == null) { map.put("valid", true); }else{ map.put("valid", false); } return map; }
效果如下。
下面是几个比较常见的验证规则。
notEmpty：非空验证；
stringLength：字符串长度验证；
regexp：正则表达式验证；
emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）
base64：64位编码验证；
between：验证输入值必须在某一个范围值以内，比如大于10小于100；
creditCard：身份证验证；
date：日期验证；
ip：IP地址验证；
numeric：数值验证；
url：url验证；
callback：自定义验证
Form表单的提交
关于提交，可以直接用form表单提交即可。
<div> <div> <button type="submit">提交</button> </div> </div>
也可以通过AJAX提交，提交按钮代码和form表单的提交按钮代码一样，通过id选中按钮绑定点击事件提交。
$("#btn").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证 $("form").bootstrapValidator('validate'); //提交验证 if ($("form").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码 alert("yes"); //验证成功后的操作，如ajax } });
效果图，这里验证通过后通过弹框提示的，方法中可以写AJAX提交代码。
页面完整代码。
<meta charset="UTF-8"> <form action=""> <div> <label>学号</label> <div> <input type="text" data-bv-notempty="true" data-bv-notempty-message="用户名不能为空" /> </div> </div> <div> <label>用户名</label> <div> <input type="text" /> </div> </div> <div> <label>姓名</label> <div> <input type="text" /> </div> </div> <div> <label>年龄</label> <div> <input type="text" /> </div> </div> <div> <label>电话</label> <div> <input type="text" /> </div> </div> <div> <label>Email</label> <div> <input type="text" /> </div> </div> <div> <label>密码</label> <div> <input type="text" /> </div> </div> <div> <label>确定密码</label> <div> <input type="text" /> </div> </div> <div> <div> <button type="submit">提交</button> </div> </div> </form> <script type="text/javascript"> $(function () { $('form').bootstrapValidator({ //默认提示 message: 'This value is not valid', // 表单框里右侧的icon feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) { // 表单提交成功时会调用此方法 // validator: 表单验证实例对象 // form jq对象 指定表单对象 // submitButton jq对象 指定提交按钮的对象 }, fields: { username: { message: '用户名验证失败', validators: { notEmpty: { //不能为空 message: '用户名不能为空' }, remote: { //后台验证，比如查询用户名是否存在 url: 'student/verifyUsername', message: '此用户名已存在' } } }, name: { message: '姓名验证失败', validators: { notEmpty: { message: '姓名不能为空' } } }, age: { message: '年龄验证失败', validators: { notEmpty: { message: '年龄不能为空' }, numeric: { message: '请填写数字' } } }, phoneNumber: { message: '电话号验证失败', validators: { notEmpty: { message: '电话号不能为空' }, regexp: { //正则验证 regexp: /^1\d{10}$/, message: '请输入正确的电话号' } } }, email: { message: 'Email验证失败', validators: { notEmpty: { message: 'Email不能为空' }, emailAddress: { //验证email地址 message: '不是正确的email地址' } } }, pwd: { notEmpty: { message: '密码不能为空' }, stringLength: { //检测长度 min: 4, max: 15, message: '用户名需要在4~15个字符' } }, pwd1: { message: '密码验证失败', validators: { notEmpty: { message: '密码不能为空' }, identical: { //与指定控件内容比较是否相同，比如两次密码不一致 field: 'pwd',//指定控件name message: '两次密码不一致' } } } } }); $("#btn").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证 $("form").bootstrapValidator('validate'); //提交验证 if ($("form").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码 alert("yes"); //验证成功后的操作，如ajax } }); }) </script>
到这里，BootstrapValidator验证插件的方法已经写的很全面了。不足地方欢迎大家下方留言指出！
可以使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。
PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：