bootstrap 模特窗口添加验证
来源：互联网 发布：名师辅导班软件 编辑：程序博客网 时间：2024/04/27 17:17
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags/form" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><html><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><head><meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件（一般不用引入） --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><link href="<%=basePath%>/page/pf/base/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <link href="<%=basePath%>/page/pf/base/bootstrap/table/bootstrap-table.css" rel="stylesheet"/> <link href="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script><script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script><script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.min.js?version=09092200010"></script><script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.fr.js?version=09092200010"></script><script type="text/javascript" src="<%=basePath%>/page/pf/base/bootstrap/bootstrap-datetimepicker.zh-CN.js?version=09092200010"></script><script src="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script><script src="//cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.min.js"></script><style type="text/css">.quantity-remove, .quantity-add { cursor: pointer;}.quantity-add.glyphicon, .quantity-remove.glyphicon { display: block; cursor: pointer;}</style><script src="<%=basePath%>/page/project/wechat/m600material/js/material_view.js"></script><title>物料</title></head><body class="container"><h4 class="page-header">详细</h4><div style="text-align: right;"><button type="button" id="outQuantityBtn" class="btn btn-primary">出库</button></div><spring:form id="defaultForm" class="form-horizontal" modelAttribute="materialDto"><input type="hidden" id="id" value="${materialDto.id }"/><div class="form-group"><label class="col-sm-2 control-label">项目名称：</label>${materialDto.projectName }</div><div class="form-group"><label class="col-sm-2 control-label">物料名称：</label>${materialDto.name }</div><div class="form-group"><label class="col-sm-2 control-label">入库时间：</label>${materialDto.inDate }</div><div class="form-group"><label class="col-sm-2 control-label">物料数量：</label>${materialDto.inQuantity }</div><div class="form-group"><label class="col-sm-2 control-label">入库负责人：</label>${materialDto.inLeader }</div><table class="table table-hover table-bordered" id="outMaterialTable" data-pagination="false" data-search="false" data-show-refresh="false" data-toggle="card" data-card-view = "true" data-show-toggle="false" data-show-columns="false" data-page-list="[10,20,50,100]"> <caption>出库列表</caption> <thead> <thead> <tr> <th data-field="outDate" data-halign="center">出库时间：</th> <th data-field="outQuantity" data-halign="center">出库数量：</th> <th data-field="outLeader" data-halign="center">出库人：</th> </tr> </thead> <tbody> </tbody> </table> </spring:form><div class="modal fade" id="myModal" 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">×</button><h4 class="modal-title" id="myModalLabel">出库信息</h4><br></div><div class="modal-body"><spring:form id="outMaterialForm" action="" class="form-horizontal" modelAttribute="outMaterialDto"data-bv-message="This value is not valid" data-bv-feedbackicons-valid="glyphicon glyphicon-ok" data-bv-feedbackicons-invalid="glyphicon glyphicon-remove" data-bv-feedbackicons-validating="glyphicon glyphicon-refresh"><spring:hidden path="mId"/><div class="form-group"><label class="col-sm-2 control-label">出库时间：</label><div class="col-sm-4"><div class="input-group date" id="outDate"> <spring:input class="form-control" path="outDate" data-bv-notempty="true"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div></div></div><div class="form-group"><label class="col-sm-2 control-label">出库数量：</label><div class="col-sm-4"> <div id="1" class="input-group input-group-option quantity-wrapper"> <span class="input-group-addon input-group-addon-remove quantity-remove btn"> <span class="glyphicon glyphicon-minus"></span> </span> <spring:input id="1inp" value="6" path="outQuantity" name="option[]" class="form-control quantity-count" placeholder="1" /> <span class="input-group-addon input-group-addon-remove quantity-add btn"> <span class="glyphicon glyphicon-plus"></span> </span> </div></div></div><div class="form-group"><label class="col-sm-2 control-label">出库人：</label><div class="col-sm-4"><spring:input data-bv-notempty="true" class="form-control" path="outLeader"/></div></div> </spring:form> </div><div class="modal-footer" style="text-align: center;"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary" id="saveOutMaterialBtn">保存</button></div></div></div></div><div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"></div><div class="modal-body"><a href="#" id="loadingModalContent" class="thumbnail">正在保存，请稍后... </a></div><div class="modal-footer"></div></div></div></div><div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"></div><div class="modal-body"><a href="#" class="thumbnail">保存成功。 </a></div><div class="modal-footer"></div></div></div></div></body></html>var MaterialManager = {};$(document).ready(function() {MaterialManager.query = function(){$('#outMaterialTable').bootstrapTable('destroy'); //初始化表格,动态从服务器加载数据 $("#outMaterialTable").bootstrapTable({ url:'../../supManage/material/queryOutMaterialList.do', method: "get", //使用get请求到服务器获取数据 contentType: "application/x-www-form-urlencoded", striped: true, //表格显示条纹 pageSize: 10, //每页显示的记录数 pageNumber:1, //当前第几页 pageList: [5, 10, 15, 20, 25], //记录数可选列表 sidePagination: "server", //表示服务端请求 //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder //设置为limit可以获取limit, offset, search, sort, order queryParamsType : "undefined", queryParams: function queryParams(params) { //设置查询参数 var param = { currentPage: params.pageNumber, recordsPerPage: params.pageSize, mId:$("#id").val() }; return param; } });};MaterialManager.query();$("#saveOutMaterialBtn").click(function(){//$("#outMaterialForm").data('bootstrapValidator').destroy();//$('#outMaterialForm').data('bootstrapValidator', null);$("#outMaterialForm").bootstrapValidator('updateStatus', 'outDate', 'NOT_VALIDATED').bootstrapValidator('validateField', 'outDate');var isValid = $('#outMaterialForm').data('bootstrapValidator').validate().isValid();if(!isValid)return;$("#loadingModal").modal('show');$("#myModal").modal('hide');$.ajax({type: "POST",url: "../../supManage/material/saveOutMaterial.do",data:$("#outMaterialForm").serialize(),dataType: "json",success: function(data){//$("#alertModal").modal('show');//$("#loadingModal").modal('hide');$("#loadingModalContent").html("保存成功。");MaterialManager.query();setTimeout(function(){$("#loadingModal").modal('hide');},2000);}});});// 出库按钮$("#outQuantityBtn").click(function(){$('#outMaterialForm').bootstrapValidator('resetForm', true);$("#myModal").modal('show');});$('#outDate').datetimepicker({ format: 'yyyy-mm-dd hh:ii:ss', language:'zh-CN', autoclose:true, startDate:'2016-09-01', endDate:'2025-12-12'}); $('#outMaterialForm').bootstrapValidator({ fields: { datetimePicker: { validators: { notEmpty: { message: '日期不能为空！' }, date: { format: 'MM/DD/YYYY h:m:s' } } } } }); $('#outDate').on('dp.change dp.show', function(e) { $('#datetimeForm').data('bootstrapValidator').updateStatus('outDate', 'outDate','NOT_VALIDATED').validateField('outDate'); }); $(".quantity-add").click(function(e){ //Vars var count = 1; var newcount = 0; //Wert holen + Rechnen var elemID = $(this).parent().attr("id"); var countField = $("#"+elemID+'inp'); var count = $("#"+elemID+'inp').val(); var newcount = parseInt(count) + 1; //Neuen Wert setzen $("#"+elemID+'inp').val(newcount); }); //Remove $(".quantity-remove").click(function(e){ //Vars var count = 1; var newcount = 0; //Wert holen + Rechnen var elemID = $(this).parent().attr("id"); var countField = $("#"+elemID+'inp'); var count = $("#"+elemID+'inp').val(); var newcount = parseInt(count) - 1; //Neuen Wert setzen $("#"+elemID+'inp').val(newcount); }); $('input[type="text"],textarea').on('click', function () { var target = this; setTimeout(function(){ target.scrollIntoViewIfNeeded(); console.log('scrollIntoViewIfNeeded'); },400); });}); 0 0
- bootstrap 模特窗口添加验证
- Bootstrap 验证
- bootstrap验证
- 为bootstrap模态窗口添加拖拽（draggable ）事件
- Bootstrap 自适应窗口
- bootstrap+jquery validate 验证
- bootstrap 表单验证
- bootstrap表单验证
- Bootstrap Validate表单验证
- bootstrap的验证插件
- bootstrap-validator自定义验证
- bootstrap validate表单验证
- Angular CLI --添加bootstrap
- bootstrap。。cell添加按钮
- 【bootstrap】Bootstrap Validate表单验证神器
- bootstrap 模态窗口实例
- bootstrap模态窗口模态框
- metronic.bootstrap 自己追加验证
- 撸大师SDK V1.0 iOSAPP永久后台运行
- Git的使用
- python flask mysql request 实例
- MySQL year mon day hour 拼接成datetime类型
- Spring annotation基础容器配置
- bootstrap 模特窗口添加验证
- rails 练习4 --对文章做投票
- 14 Python from-import-执行机制
- 自己动手写注解实现业务bean的字段验证
- 项目部署到Tomat报异常：jar not loaded. See Servlet Spec 2.3, section 9.7.2. Offending
- Android 检测手机的敲击事件
- C语言库stdlib.h操作
- 实现淘宝我的淘宝页面 弧边效果 不是图片哦
- tensorflow学习笔记（五）：变量保存与导入
