bootstrapvalidator 密码验证 以及清除验证

   在项目中写了一个修改密码的功能，使用了bootstrapvalidator 来进行文本框的验证。

首先在修改密码的jsp页面上加载validator的css和js   路径存放可以自己选择合适的位置。 

<link rel="stylesheet" href="./static/validator/css/bootstrapValidator.css" />

<script type="text/javascript" src="./static/validator/js/bootstrapValidator.min.js"></script>

.help-block {
	color:red
}

加入上面的css样式会将验证提示颜色设置为红色。

以下是修改密码的页面代码

<div id="editpwd"   closed="true" class="easyui-window" title="修改密码"  style="width:700px;padding:5px;" >
  <center><form id="detailForm" style="height:100%; margin-top:10px;" >
 <table class="table table-bordered" style="height:200px; width:90%; margin-top:10px;">
    <tr>
	  <td class="col-sm-2" style="background-color:#3FA9D0;">
		 <div class="table-form-label" style="padding-top: 10px" align="center" >
			<label  for="old_pwd" class="control-label">旧密码</label>
		 </div>
	  </td>
	  <td>
		<div class="col-sm-5">
			<input type="password" class="form-control" id="old_pwd" name="old_pwd"/>
		 </div>
	  </td>
	</tr>
	<tr>
	   <td class="col-sm-2" style="background-color:#3FA9D0;">
		 <div class="table-form-label" style="padding-top: 10px" align="center" >
		     <label for="new_pwd" class="control-label">新密码</label>
	 	 </div>
	   </td>
	   <td>
	     <div class="col-sm-5">
			<input type="password" class="form-control" id="new_pwd" name="new_pwd" />
		 </div>
	   </td>
	</tr>
	<tr>
	   <td class="col-sm-2" style="background-color:#3FA9D0;">
		<div class="table-form-label" style="padding-top: 10px" align="center" >
		    <label for="confirm_pwd" class="control-label">确认密码</label>
		</div>
	   </td>
	   <td>
		<div class="col-sm-5">
		<input type="password" id="confirm_pwd" name="confirm_pwd" class="form-control" />	
		</div>
	   </td>
	</tr>
	<tr>
		<td colspan="2">
			<div class="col-sm-5 col-md-offset-2">
			<button class="btn btn-success fa fa-check" style="background-color:#3FA9D0" onclick="eidtpwd();">&nbsp;提交</button>&nbsp;&nbsp;&nbsp;&nbsp;
			</div>
			</td>
	</tr>
		</table>
		</form></center>
</div>

上面有旧密码、新密码、密码确认三个文本输入框，这三个需要进行前端验证才能进行提交。

因此在js中添加验证的代码。

	function validator(){
         		//输入项的验证
         		$('#detailForm').bootstrapValidator({
         	        message: '输入值不满足不满足系统要求',
         	        excluded : [':disabled'],
         	        feedbackIcons: {
         	            valid: 'glyphicon glyphicon-ok',
         	            invalid: 'glyphicon glyphicon-remove',
         	            validating: 'glyphicon glyphicon-refresh'
         	        },
         	        live: 'enabled',
         	        fields: {
         	        	old_pwd: {
         	                message: '用户旧密码不满足系统要求',
         	                validators: {
         	                     notEmpty: {
         	                              message: '用户旧密码不能为空'
         	                         },
         	                      stringLength: {
         	                           min: 8,
         	                           max: 50,
         	                           message: '用户旧密码长度不能少于8位'
         	                       },
         	                      regexp: {
         	                         regexp: /^[^ ]+$/,
         	                         message: '用户旧密码不能有空格'
         	                       }
         	                }
         	                     
         	            },
         	          
         	            new_pwd: {
         	           	message:'新密码不满足系统要求',
         	               validators: {
         	                   notEmpty: {
         	                       message: '用户新密码不能为空'
         	                 
         	                   },
         	                  regexp : {
     	    	                    regexp : /^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])|(?=.*[A-Z])(?=.*[a-z])(?=.*[^A-Za-z0-9])|(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])|(?=.*[a-z])(?=.*[0-9])(?=.*[^A-Za-z0-9])).{8,16}$/,
     	    	                    message : '用户新密码长度为8至16位,并且需要包含数字、小写字母、大写字母、符号(至少三种)'
     	                 	       },
     	                 	  identical: {
     	                            field: 'comfirm_pwd',
     	                            message: '用户新密码与确认密码不一致！'
     	                          },
     	                 	  stringLength: {
       	                           min: 8,
       	                           max: 50,
       	                           message: '用户新密码长度不能少于8位'
       	                       }
         	               }
         	            
         	          },
         	          confirm_pwd: {
         	                validators: {
         	                    notEmpty: {
         	                        message: '确认密码不能为空'
         	                    },
         	                   regexp : {
    	    	                    regexp : /^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])|(?=.*[A-Z])(?=.*[a-z])(?=.*[^A-Za-z0-9])|(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])|(?=.*[a-z])(?=.*[0-9])(?=.*[^A-Za-z0-9])).{8,16}$/,
    	    	                    message : '用户确认密码长度为8至16位,并且需要包含数字、小写字母、大写字母、符号(至少三种)'
    	                 	       },
    	                 	  identical: {
    	                            field: 'new_pwd',
    	                            message: '用户新密码与确认密码不一致！'
    	                          },
    	                 	  stringLength: {
      	                           min: 8,
      	                           max: 50,
      	                           message: '用户确认密码长度在8-50之间'
      	                       }
         	                }
         	            }
         	        }
         	    });
         	}

fileds是分别取文本输入框的name属性来进行验证。

以下是密码通过ajax传到后端，点击按钮时先判定是否进行了bootstrapvalidator的验证。

 function eidtpwd(){
			  	validator();
		        pwd = CryptoJS.MD5($("#new_pwd").val()).toString();  
				passWord = CryptoJS.MD5( $("#old_pwd").val()).toString();   
				var url = "modifyPwd";
				
				var param = {
					user_pwd : passWord,
					newPwd : pwd
				}
				var bootstrapValidator = $("#detailForm").data('bootstrapValidator');
				bootstrapValidator.validate();
				if(bootstrapValidator.isValid()){
					$.ajax({
						type: "POST",
						url:url,
						data: param,
						async: false,
						success: function(r){
							if(r && r.success){
								$.messager.alert('提示', "修改密码成功！");
								$('#editpwd').window('close');
							}else{
								$.messager.alert('错误',r.msg);
							}
						},
						error: function(r){
							$.messager.alert('错误', "系统故障，请稍后再试！");
						}
						
					});
				}
			}
		</script>

如果你要进行验证的清除则加下面两行代码即可

$("#detailForm").data('bootstrapValidator').destroy();
    $("#detailForm").data('bootstrapValidator',null);