基于bootstrap的bootstrapValidator表单验证插件

		<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="assets/bootstrap-validator/css/bootstrapValidator.min.css" />

	<script src="assets/jquery/jquery.min.js"></script>
	<script src="assets/bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/bootstrap-validator/js/bootstrapValidator.min.js"></script>

上面是都需要引入的样式和js

页面结构

<form class="form-horizontal" id="login" autocomplete="off">
							<div class="form-group">
								<label for="username" class="col-md-3 control-label">用户名</label>
								<div class="col-md-9">
									<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
								</div>
							</div>
							<div class="form-group">
								<label for="password" class="col-md-3 control-label">密    码</label>
								<div class="col-md-9">
									<input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
								</div>
							</div>
							<div class="form-group">
								<div class="col-md-offset-3 col-md-6">
									<button type="reset" class="btn btn-default pull-left">重置</button>
									<button type="submit" class="btn btn-primary pull-right">登录</button>
								</div>
							</div>
						</form>

要求：

 1、完整的表单结构 form input submit（必需有submit提交按钮，不可更换别的比如用button代替）
 2、表单元素必须有name属性

js代码：

	$("#login").bootstrapValidator({
//		提示的图标
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',			// 有效的
            invalid: 'glyphicon glyphicon-remove',		// 无效的
            validating: 'glyphicon glyphicon-refresh'	// 刷新的
		},
//		属性对应的是表单元素的名字
		fields: {
//			匹配校验规则
			username: {
				// 规则
				validators: {
					message: '用户名无效',	// 默认提示信息 
					notEmpty: {
                        message: '用户名不能为空'
                    },
                    regexp: {/* 只需加此键值对，包含正则表达式，和提示 */
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '只能是数字字母_.'
                    },
                    /*设置错误信息 和规则无关 和后台校验有关系*/
                    callback: {
                        message: '用户名错误'
                    },
                    fun: {
                    	message: 'fun函数无效的示例'
                    }
				}
			},
			password: {
                validators: {
                	message: '密码无效',
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 18,
                        message: '密码在6-18个字符内'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '含有非法字符'
                	},
                    callback: {
                        message: '密码不正确' 
                    }
                }
            }
		}
	}).on('success.form.bv', function (e) { // 表单校验成功
		/*禁用默认提交的事件 因为要使用ajax提交而不是默认的提交方式*/
		e.preventDefault();
		/*获取当前的表单*/
		var form = $(e.target);	// 可以通过选择器直接选择
		console.log(form.serialize());	// username=root&password=123456
		$.ajax({
			type: "post",
			url: "/employee/employeeLogin",
			data: form.serialize(),
			dataType: 'json',
			success: function (response) {
				if (response.success) {
                    /*登录成功之后的跳转*/
                    location.href = 'index.html';
                } else {
                	// 登录失败
//              	登录按钮点击后,默认不允许再次点击;登录失败要恢复登录按钮的点击
//					form.data('bootstrapValidator').disableSubmitButtons(false);
					form.bootstrapValidator('disableSubmitButtons', false);
//					指定触发某一个表单元素的的错误提示函数
					if (response.error == 1000) { // 后台接口如果返回error=1000表示name错误
//						form.data('bootstrapValidator').updateStatus('username', 'INVALID', 'fun'); // 不能触发
// 						可以触发
						form.data('bootstrapValidator').updateStatus('username', 'INVALID', 'callback'); 
//						form.data('bootstrapValidator').updateStatus('username', 'INVALID').validateField('username');
//						form.data('bootstrapValidator').updateStatus('username', 'INVALID', 'notEmpty');
					} else if (response.error == 1001) { // 后台接口如果返回error=1001表示密码错误
						form.data('bootstrapValidator').updateStatus('password', 'INVALID', 'callback');
					}
                }
			}
		});
	});
//	重置功能
	$(".pull-left[type='reset']").on('click', function () {
		$('#login').data('bootstrapValidator').resetForm();
	});

为什么会有这一段？

if (response.error == 1000) { // 后台接口如果返回error=1000表示name错误
//						form.data('bootstrapValidator').updateStatus('username', 'INVALID', 'fun'); // 不能触发
// 						可以触发
						form.data('bootstrapValidator').updateStatus('username', 'INVALID', 'callback'); 
//						form.data('bootstrapValidator').updateStatus('username', 'INVALID').validateField('username');
//						form.data('bootstrapValidator').updateStatus('username', 'INVALID', 'notEmpty');
					} else if (response.error == 1001) { // 后台接口如果返回error=1001表示密码错误
						form.data('bootstrapValidator').updateStatus('password', 'INVALID', 'callback');
					}

这一段是未登录成功之后的处理。

 当点击submit按钮之前，表单上面初始验证都是正确的

但是，就算是这样，也只能说明表单验证输入字符符合表单规定的验证规则，不一定能登录成功

因为密码或者用户名还是可能出错。这只能传到后台，由后台来判断并返回信息

写这一段的目的，是为了未能登录成功之后仍给用户返回错误信息。

 updateStatus(field, status, validatorName)更新指定的字段状态。

 BootstrapValidator默认在校验某个字段合法后不再重新校验，当调用其他插件或者方法可能会改变字段值时，

 需要重新对该字段进行校验。这就好比点击提交按钮之前，初次验证都符合，但是后台返回错误信息之后，这时如果要

提示哪里出错时，就要把字段的状态更新来显示错误信息

更加详细的教程点击打开链接

更加全的一个实例点击打开链接