boostrap表单验证插件-bootstrapValidator

Posted 咩咩文

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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



以上是关于boostrap表单验证插件-bootstrapValidator的主要内容,如果未能解决你的问题,请参考以下文章

使用jquery.validate.js实现boostrap3的校验和验证

boostrap ajax表单验证提交

一款非常好用的boostrap的验证插件再也不用自己手写正则表达式和js了

boostrap插件

Boostrap 插件

jquery的表单验证插件怎么验证身份证号