boostrap表单验证插件-bootstrapValidator

1.页面引入css、js

  <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

    <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>

2.页面表单

<div class="modal fade" id="details" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btn_colse">×
				</button>
				<h4 class="modal-title" id="title">系统用户信息</h4>
			</div>
			<div class="modal-body">
			<form class="form-horizontal" role="form" id="detailForm"  action="" method="post">
				<input type="hidden" class="form-control" id="id" name="id">
				<div class="form-group">
				<label for="userName" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="userName" name="userName">
				</div>
				</div>
				<div class="form-group">
				<label for="userPassword" class="col-sm-2 control-label">密码</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="userPassword" name="userPassword">
				</div>
				</div>
				
				<div class="form-group">
				<label for="email" class="col-sm-2 control-label">Email</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="email" name="email">
				</div>
				</div>
				<div class="form-group">
				<label for="alias" class="col-sm-2 control-label">别名</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="alias" name="alias">
				</div>
				</div>
				
				<div class="form-group">
				<label for="personId" class="col-sm-2 control-label">隶属人员</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="personId" name="personId">
				</div>
				<label for="enabled" class="col-sm-2 control-label">是否可用</label>
				<div class="col-sm-4">
					<input type="radio" name="enabled"  value="true" checked>是
					<input type="radio" name="enabled" 	value="false">否
				</div>
				</div>
				
				<div class="form-group">
				<label for="accountExpired" class="col-sm-3 control-label">账号是否过期</label>
				<div class="col-sm-2">
					<input type="radio" name="accountExpired"   value="true">是
					<input type="radio" name="accountExpired" 	value="false" checked>否
				</div>
				<label for="accountLocked" class="col-sm-3 control-label">账号是否锁定</label>
				<div class="col-sm-2">
					<input type="radio" name="accountLocked"  value="true">是
					<input type="radio" name="accountLocked"  value="false" checked>否
				</div>
				</div>
				
				
				<div class="form-group">
				<label for="credentialsExpired" class="col-sm-3 control-label">密码是否过期</label>
				<div class="col-sm-2">
					<input type="radio" name="credentialsExpired"   value="true">是
					<input type="radio" name="credentialsExpired" 	value="false" checked>否
				</div>
				<label for="superAdmin" class="col-sm-3 control-label">是否超级管理员</label>
				<div class="col-sm-2">
					<input type="radio" name="superAdmin"  value="true">是
					<input type="radio" name="superAdmin"  value="false" checked>否
				</div>
				</div>
				
				<div class="form-group">
				<label for="memo" class="col-sm-2 control-label">备注</label>
				<div class="col-sm-10">
					<textarea cols="80" rows="3"  class="form-control" id="memo" name="memo"></textarea>
				</div>
				</div>
			<div style="width: 250px; margin: 20px auto;">
				<button type="button"  id="saveBtn" class="btn btn-primary" >保存</button>
				<button type="button"  id="resetBtn"  style="margin-left:10px" class="btn btn-danger" >重置</button>
				<button type="button"  id="cancelBtn" style="margin-left:10px" class="btn btn-default" >取消</button>
			</div>
		</form>
			</div>
		</div><!-- /.modal-content -->

3.js初始化验证

//验证表单
	var validatorForm = {
			//验证规则
			validatorReuls:function(){
				$("#detailForm").bootstrapValidator({
			        feedbackIcons: {
			            valid: 'glyphicon glyphicon-ok',
			            invalid: 'glyphicon glyphicon-remove',
			            validating: 'glyphicon glyphicon-refresh'
			        },
			        fields: {
			        	userName:{
			        		  validators: {
				                	notEmpty: {  
				                        message: '用户名不能为空'  
				                    }, 
				                    remote: {ajax验证。服务器端返回的 result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
				                        url: contextPath+"/sysUser/username",
				                        type:"GET",
				                        data: function(validator) {
				                        	var x_={
				                        		userName: validator.getFieldElements('userName').val()
				                            };
				                            return x_;
				                        },
				                        message: '用户名已注册，请重新输入'
				                    }
				                }
			        		
			        	},
			        	email: {
			                validators: {
			                	notEmpty: {  
			                        message: '邮箱不能为空'  
			                    },  
			                    regexp: {//正则表达式
			                        regexp: Regex.email,
			                        message: '邮箱地址格式不正确'
			                    }
			                }
			            }
			        	,userPassword: {
				            validators: {
				            	notEmpty: {  
			                        message: '密码不能为空'  
			                    }, 
			                    regexp: {
			                        regexp: Regex.password_6_18,
			                        message: '密码只能输入6-18个字母、数字、下划线 '
			                    }
				            }
				        }
			        }
				});
			},
			//验证表单
			validate: function(formId){
				   $('#'+formId).data('bootstrapValidator').validate();  
			},
			//验证表单是否通过验证
			isValid :  function(formId){
				return $('#'+formId).data('bootstrapValidator').isValid()
			},
			//清空表单验证
			clearValidate : function(formId){
				$('#'+formId).bootstrapValidator('resetForm');
			}
	}

4.最后呈现的效果

bootstrapValidator官网:bootstapValidator