boostrap表单验证插件-bootstrapValidator

1.页面引入css、js

2.页面表单

    

		

			

				×
				
				
系统用户信息
			
			

			

				
				

				用户名
				

					
				
				
				

				密码
				

					
				
				
				
				

				Email
				

					
				
				
				

				别名
				

					
				
				
				
				

				隶属人员
				

					
				
				是否可用
				

					是
					否
				
				
				
				

				账号是否过期
				

					是
					否
				
				账号是否锁定
				

					是
					否
				
				
				
				
				

				密码是否过期
				

					是
					否
				
				是否超级管理员
				

					是
					否
				
				
				
				

				备注
				

					
				
				
			

				保存
				重置
				取消
			
		
			
		

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