Bootstrap是现在非常流行的一款前端框架，这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator。
先来看一下效果图（样式是不是还不错O(∩_∩)O哈哈~）。
Bootstrapvalidator下载地址：https://github.com/nghuuphuoc/bootstrapvalidator/?
引入对应的CSS和JS
<link type="text/css" href="https://www.jb51.net/css/bootstrap.css" /> <link type="text/css" href="https://www.jb51.net/css/bootstrapValidator.css" /> <script src="https://www.jb51.net/js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/js/bootstrap.js" type="text/javascript"></script> <script src="https://www.jb51.net/js/bootstrapValidator.js"></script>
添加验证规则
使用HTML添加验证。
对某一个标签添加验证规则，需要放在<div></div>标签中，input标签必须有name属性值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构。
<div> <label>学号</label> <div> <input type="text" data-bv-notempty="true" data-bv-notempty-message="用户名不能为空" /> </div> </div>
初始化bootstrapValidator。
<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对象 指定提交按钮的对象 } }); </script>
效果图。
使用data-bv-notempty 和 data-bv-notempty-message属性就可以简单进行非空验证。data-bv-notempty 有值就进行非空验证，data-bv-notempty-message 中的值为提示消息。
使用JS添加验证
HTML样式代码。
<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>
JS验证代码，其中fields属性中的值，需要和HTML标签中的name值一样，确定给那个标签添加验证。
<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: '此用户名已存在' } } }, 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: '两次密码不一致' } } } } }); </script>
效果如下。
AJAX后台交互验证，验证用户名是否存在。
<div> <label>用户名</label> <div> <input type="text" /> </div> </div>