bootstrap 组件学习之bootstrap validator

于 2016-11-18 23:24:20 发布
阅读量3.7k 收藏 1
点赞数 1
分类专栏： Bootstrap 文章标签： Bootstrapvalidator Bootstrap组件 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zh4000/article/details/53224656
版权

bootstrap 组件学习之bootstrap validator

1.项目目录


1. 源码和api地址 

bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator

boostrapvalidator api：http://bv.doc.javake.cn/api/

2. 引入js插件

    	<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="lib/bootstrap/plus/validator/css/bootstrapValidator.min.css" />
	<script src="lib/jquery-1.11.0.min.js"></script>
	<script src="lib/bootstrap/js/bootstrap.min.js"></script>
	<script src="lib/bootstrap/plus/validator/js/bootstrapValidator.js"></script>
	<script src="lib/bootstrap/plus/validator/js/language/zh_CN.js"></script>

3. 简单使用 

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>getClassmate</title>
		<!-- Bootstrap -->
		<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="lib/bootstrap/plus/validator/css/bootstrapValidator.min.css" />
		<link rel="stylesheet" href="lib/bootstrap/css/shiftform.css"/>
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<div class="col-xs-12">
<div id="createModal" class="modal-dialog demo2do-modal-dialog">
    <div class="modal-content">
        <div class="modal-header beast-breadcrumb no-bottom-border clearfix">
            <h2><i class="glyphicon glyphicon-fire" title=""></i>  <span>添加权限</span></h2>
            <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <form class="form-horizontal" id="createForm" method="POST" action="base.html">
            <div class="modal-body">
                <div class="form-group demo2do-form-group">
                    <label class="col-xs-3 control-label">权限系统名</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="privilegeName" name="privilegeName"/>
                    </div>
                </div>
                <div class="form-group demo2do-form-group">
                    <label class="col-xs-3 control-label">权限中文名</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="create_Name" name="privilegeCnName" />
                    </div>
                </div>
                <div class="form-group demo2do-form-group">
                    <label class="col-xs-3 control-label">URI</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="uri" name="uri" />
                    </div>
                </div>
                <div class="form-group demo2do-form-group">
                    <label class="col-xs-3 control-label">排序索引号</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="sortIndex" name="sortIndex" />
                    </div>
                </div>
                <div class="form-group demo2do-form-group">
                    <label class="col-xs-3 control-label">权限分类</label>
                    <div class="col-xs-8" id="moduleParentDiv">
                        <select id="level" name="moduleId" class="form-control select2">
                            <option></option>
                            <option value="1">普通权限</option>
                            <option value="2">菜单</option>
                            <option value="3">模块</option>
                        </select>
                    </div>
                </div>
                <div class="form-group demo2do-form-group">
                    <label class="col-xs-3 control-label">是否默认选中</label>
                    <div class="col-xs-8">
                        <select id="isChecked" name="isChecked" class="form-control select2">
                            <option value="">否</option>
                            <option value="1">是</option>
                        </select>
                    </div>
                </div>
                <div class="form-group demo2do-form-group">
                    <label class="col-xs-3 control-label">上级权限</label>
                    <div class="col-xs-8">
                        <select id="parentPrivilegeId" name="parentPrivilegeId" class="form-control">
                        	<option value="3620194" selected="selected">select2/select2</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success btn-shadow btn-shadow-success demo2do-btn">添加</button>    
                <button type="button" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-dismiss="modal">取消</button>
            </div>
        </form>
    </div>
</div>
		</div>
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="lib/jquery-1.11.0.min.js"></script>
		<script src="lib/bootstrap/js/bootstrap.min.js"></script>
		<script src="lib/bootstrap/plus/validator/js/bootstrapValidator.js"></script>
		<script src="lib/bootstrap/plus/validator/js/language/zh_CN.js"></script>
		<script src="lib/bootstrap/js/shiftform.js"></script>
		
<!--		<script type="text/javascript">
		$(function () {
			    $('#isChecked').select2({
		        allowClear: true,
		        minumiumResultsForSearch: 1,
		        maximumSelectionLength: 5
		    });
		});
		</script>-->
		<script type="text/javascript">
		//验证规则
$('#createForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        //表单name
        privilegeName: {
            //提示消息
            message: '系统权限名验证失败',
            //需要做的验证
            validators: {
                //验证项
                notEmpty: {
                    message: '系统权限名不能为空'
                },
                stringCase: {
                    message: '系统权限名必须是大写',
                    'case': 'upper'
                }
            }
        },
        privilegeCnName: {
            //提示消息
            message: '权限中文名称验证失败',
            //需要做的验证
            validators: {
                //验证项
                notEmpty: {
                    message: '权限中文名称不能为空'
                }
            }
        },
        uri: {
            //提示消息
            message: '权限名称验证失败',
            //需要做的验证
            validators: {
                //验证项
                notEmpty: {
                    message: '权限路径不能为空'
                }
            }
        },
        level: {
            //提示消息
            message: '权限分类失败',
            //需要做的验证
            validators: {
                //验证项
                notEmpty: {
                    message: '权限分类不能为空'
                }
            }
        },
        sortIndex: {
            validators: {
                notEmpty: {
                    message: '排序不能为空'
                },
                numeric: {
                    message: '排序号必须是数字'
                }
            }
        }
    }
});	 	
</script>
</body>
</html>

验证效果：


4.   自定义提交验证

js代码 
		<script type="text/javascript">
		//验证规则
var vaildatorRule={
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        //表单name
        privilegeName: {
            //提示消息
            message: '系统权限名验证失败',
            //需要做的验证
            validators: {
                //验证项
                notEmpty: {
                    message: '系统权限名不能为空'
                },
                stringCase: {
                    message: '系统权限名必须是大写',
                    'case': 'upper'
                }
            }
        },
        privilegeCnName: {
            //提示消息
            message: '权限中文名称验证失败',
            //需要做的验证
            validators: {
                //验证项
                notEmpty: {
                    message: '权限中文名称不能为空'
                }
            }
        },
        uri: {
            //提示消息
            message: '权限名称验证失败',
            //需要做的验证
            validators: {
                //验证项
                notEmpty: {
                    message: '权限路径不能为空'
                }
            }
        },
        level: {
            //提示消息
            message: '权限分类失败',
            //需要做的验证
            validators: {
                //验证项
                notEmpty: {
                    message: '权限分类不能为空'
                }
            }
        },
        sortIndex: {
            validators: {
                notEmpty: {
                    message: '排序不能为空'
                },
                numeric: {
                    message: '排序号必须是数字'
                }
            }
        }
    }
};	 	
// 关闭表单 submit 事件
$("#createForm").submit(function(ev){ev.preventDefault();});
$("#createForm").on("click", function(){
	var result=true;
	debugger
	//初始化验证插件
	$("#createForm").bootstrapValidator(vaildatorRule); //vaildatorRule 验证规则
	//得到获取validator对象或实例
   	var bootstrapValidator = $("#createForm").data('bootstrapValidator');
   	// 执行表单验证
   	bootstrapValidator.validate();
   	//isValid() 返回验证结果
   	result=bootstrapValidator.isValid();
   	if(bootstrapValidator.isValid())
     		$("#createForm").submit();
   	else return;
});		
</script>

5. 其他参考文章
1.  Bootstrap datetimepicker 和 bootstrap validator 的结合使用    http://blog.aizhet.com/IT/16351.html
2.  bootstrapvalidator之API学习    http://www.cnblogs.com/franson-2016/p/5842012.html
3.  Bootstrap validator 自定义验证码校验    http://www.my80s.net/post/290.html
4.  使用bootstrapvalidator的远程验证     http://www.cnblogs.com/franson-2016/p/5613696.html
        5.  默认的验证规则 ：  http://bv.doc.javake.cn/validators/

zh4000
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值