jquery.validate.js的使用小结

最新推荐文章于 2024-07-26 18:35:26 发布
最新推荐文章于 2024-07-26 18:35:26 发布
阅读量104 收藏
点赞数
文章标签： javascript json python ViewUI
原文链接：https://my.oschina.net/u/660595/blog/693586
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

jquery很好的网站：http://www.runoob.com/jquery/jquery-plugin-validate.html

页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 通知 &amp; 提示</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
   
    <link rel="shortcut icon" href="${pageContext.request.contextPath }/favicon.ico">
    <link href="${pageContext.request.contextPath }/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="${pageContext.request.contextPath }/css/animate.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/plugins/summernote/summernote.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/plugins/cropper/cropper.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
   
    <script src="${pageContext.request.contextPath }/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/treeview/bootstrap-treeview.js"></script>
    <script src="${pageContext.request.contextPath }/js/demo/treeview-demo.min.js"></script>
    
    <script type="text/javascript" src="<%=basePath%>/js/My97DatePicker/WdatePicker.js"></script>
    
    <script src="${pageContext.request.contextPath }/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/validate/jquery.metadata.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/validate/messages_zh.min.js"></script>
    <!-- <script src="js/demo/form-validate-demo.min.js"></script> -->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/layer/layer.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/hplus.min.js?v=4.0.0"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/contabs.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/pace/pace.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/content.min.js?v=1.0.0"></script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/demo/bootstrap-table-demo.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/iCheck/icheck.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.form.js"></script>
    <!-- 导入ztree类库 -->
	<link rel="stylesheet"
	href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"
	type="text/css" />
	<script
	src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"
	type="text/javascript"></script>
	<link href="http://github-proxy.kodono.info/?q=https://raw.github.com/Aymkdn/Datepicker-for-Bootstrap/master/datepicker.css" rel="stylesheet">
   <script src="http://github-proxy.kodono.info/?q=https://raw.github.com/Aymkdn/Datepicker-for-Bootstrap/master/bootstrap-datepicker.js"></script> 
	 <script>
	 $(document).ready(
				function(){
					$("#delete").click(
						function(){
							swal({
								title:"您确定要删除这条信息吗",text:"删除后将无法恢复，请谨慎操作！",
								type:"warning",
								showCancelButton:true,
								confirmButtonColor:"#DD6B55",
								confirmButtonText:"删除",
								closeOnConfirm:false
								},function(){
									swal("删除成功！","您已经永久删除了这条信息。","success")
									}
							)
						}
					)
				}
			)
		
    </script>
    <script>
        $(document).ready(function(){$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})});
    </script>

	<style>
		.table th, .table td { 
			text-align: center; 
			height:38px;
	</style>
	
	<script type="text/javascript">
	$(function(){
		
		//当点击添加用户的时候，首先重置添加用户表单中的内容
		  $("#adduserinfo").bind('click',function() {
			  //表单内容重置
			  $('#adduserform')[0].reset();
			  //表单验证错误的提示信息恢复到初始状态
			  $("#adduserform").validate().resetForm();	
		  });
		
		  //添加角色表单数据（暂时不适用）
		  $("#adduserform").validate({
			  submitHandler:function() { 
				  alert("Submitted!") 
				  if ($("#adduserform input[name='roleIds']:checked").length >= 1) {
						
						var array = new Array();
						$("#adduserform input[name='roleIds']:checked").each(function(){    
							  array.push($(this).val());    
						});
						var rolesid = array.join(",");
						//为隐藏域赋值addRoleIds
						$("#adduserform input[name='addRoleIds']").val(rolesid);
						
						 $.ajax({  
					            url:'${pageContext.request.contextPath}/user/add',   
					              
					            type:'post',  
					            data:$('#adduserform').serialize(), 
					            /* dataType: "json",  */
				                /* contentType: "application/x-www-form-urlencoded;charset=UTF-8", */
					            success:function(data){  
					                //添加角色modal消失
					                $("#addModal").modal('hide');
					              
					                var parameter = {silent: true};
					                var c = $('#biaoge').bootstrapTable('refresh', parameter);
					            }  
					         });
					} else {
						swal({
					        title: "操作提示",   //弹出框的title
					        text: "请至少选择一种角色！！",  //弹出框里面的提示文本
					        type: "warning",    //弹出框类型
					        //showCancelButton: true, //是否显示取消按钮
					        confirmButtonColor: "#DD6B55",//确定按钮颜色
					        //cancelButtonText: "取消",//取消按钮文本
					        confirmButtonText: "确定",//确定按钮上面的文档
					        closeOnConfirm: true
					      }, function () {
					          return false;
					      });
					}
					
					 return false;
					 
				}
			});
		 //添加角色表单数据（暂时不适用）
		  $("#adduserform12").submit(function() {
			    alert($("#adduserform").validate());
			    
				if ($("#adduserform input[name='roleIds']:checked").length >= 1) {
					
					var array = new Array();
					$("#adduserform input[name='roleIds']:checked").each(function(){    
						  array.push($(this).val());    
					});
					var rolesid = array.join(",");
					//为隐藏域赋值addRoleIds
					$("#adduserform input[name='addRoleIds']").val(rolesid);
					
					 $.ajax({  
				            url:'${pageContext.request.contextPath}/user/add',   
				              
				            type:'post',  
				            data:$('#adduserform').serialize(), 
				            /* dataType: "json",  */
			                /* contentType: "application/x-www-form-urlencoded;charset=UTF-8", */
				            success:function(data){  
				                //添加角色modal消失
				                $("#addModal").modal('hide');
				              
				                var parameter = {silent: true};
				                var c = $('#biaoge').bootstrapTable('refresh', parameter);
				            }  
				         });
				} else {
					swal({
				        title: "操作提示",   //弹出框的title
				        text: "请至少选择一种角色！！",  //弹出框里面的提示文本
				        type: "warning",    //弹出框类型
				        //showCancelButton: true, //是否显示取消按钮
				        confirmButtonColor: "#DD6B55",//确定按钮颜色
				        //cancelButtonText: "取消",//取消按钮文本
				        confirmButtonText: "确定",//确定按钮上面的文档
				        closeOnConfirm: true
				      }, function () {
				          return false;
				      });
				}
				
				 return false;
			 }); 
		  
		 //表单数据的修改的提交
		  $("#updateuserform").validate({
			  submitHandler:function() { 
					  if ($("#updateuserform input[name='roleIds']:checked").length >= 1) {
							
							var array = new Array();
							$("#updateuserform input[name='roleIds']:checked").each(function(){    
								  array.push($(this).val());    
							});
							var rolesid = array.join(",");
							//为隐藏域赋值addRoleIds
							$("#updateuserform input[name='addRoleIds']").val(rolesid);
							
							 $.ajax({  
						            url:'${pageContext.request.contextPath}/user/update',   
						              
						            type:'post',  
						            data:$('#updateuserform').serialize(), 
						            /* dataType: "json",  */
					                /* contentType: "application/x-www-form-urlencoded;charset=UTF-8", */
						            success:function(data){  
						                //添加角色modal消失
						                $("#updateModal").modal('hide');
						                //刷新一下表格数据
						                var parameter = {silent: true};
						                var c = $('#biaoge').bootstrapTable('refresh', parameter);
						            }  
						         });
						} else {
							swal({
						        title: "操作提示",   //弹出框的title
						        text: "请至少选择一种角色！！",  //弹出框里面的提示文本
						        type: "warning",    //弹出框类型
						        //showCancelButton: true, //是否显示取消按钮
						        confirmButtonColor: "#DD6B55",//确定按钮颜色
						        //cancelButtonText: "取消",//取消按钮文本
						        confirmButtonText: "确定",//确定按钮上面的文档
						        closeOnConfirm: true
						      }, function () {
						          return false;
						      });
						}
					
					 return false; 
					 
				}
			});
		 //表单数据的修改(暂时不使用)
		 $("#updateuserform12").submit(function() {
			 
			 if ($("#updateuserform input[name='roleIds']:checked").length >= 1) {
					
					var array = new Array();
					$("#updateuserform input[name='roleIds']:checked").each(function(){    
						  array.push($(this).val());    
					});
					var rolesid = array.join(",");
					//为隐藏域赋值addRoleIds
					$("#updateuserform input[name='addRoleIds']").val(rolesid);
					
					 $.ajax({  
				            url:'${pageContext.request.contextPath}/user/update',   
				              
				            type:'post',  
				            data:$('#updateuserform').serialize(), 
				            /* dataType: "json",  */
			                /* contentType: "application/x-www-form-urlencoded;charset=UTF-8", */
				            success:function(data){  
				                //添加角色modal消失
				                $("#updateModal").modal('hide');
				                //刷新一下表格数据
				                var parameter = {silent: true};
				                var c = $('#biaoge').bootstrapTable('refresh', parameter);
				            }  
				         });
				} else {
					swal({
				        title: "操作提示",   //弹出框的title
				        text: "请至少选择一种角色！！",  //弹出框里面的提示文本
				        type: "warning",    //弹出框类型
				        //showCancelButton: true, //是否显示取消按钮
				        confirmButtonColor: "#DD6B55",//确定按钮颜色
				        //cancelButtonText: "取消",//取消按钮文本
				        confirmButtonText: "确定",//确定按钮上面的文档
				        closeOnConfirm: true
				      }, function () {
				          return false;
				      });
				}
				
				 return false;
		 }); 
		 function formatDate(date, format) {   
			    if (!date) return;   
			    if (!format) format = "yyyy-MM-dd";   
			    switch(typeof date) {   
			        case "string":   
			            date = new Date(date.replace(/-/, "/"));   
			            break;   
			        case "number":   
			            date = new Date(date);   
			            break;   
			    }    
			    if (!date instanceof Date) return;   
			    var dict = {   
			        "yyyy": date.getFullYear(),   
			        "M": date.getMonth() + 1,   
			        "d": date.getDate(),   
			        "H": date.getHours(),   
			        "m": date.getMinutes(),   
			        "s": date.getSeconds(),   
			        "MM": ("" + (date.getMonth() + 101)).substr(1),   
			        "dd": ("" + (date.getDate() + 100)).substr(1),   
			        "HH": ("" + (date.getHours() + 100)).substr(1),   
			        "mm": ("" + (date.getMinutes() + 100)).substr(1),   
			        "ss": ("" + (date.getSeconds() + 100)).substr(1)   
			    };       
			    return format.replace(/(yyyy|MM?|dd?|HH?|ss?|mm?)/g, function() {   
			        return dict[arguments[0]];   
			    });                   
			}
		 
		 $("#biaoge").bootstrapTable({
				search: true,//是否显示右上角的搜索框 
				singleSelect : true,
				showRefresh : true,
				pageList: [10, 20, 50],  
				pagination : true,
				sidePagination : 'server',
				fit : true,
				border : false,
				striped : true,
				idField : 'id',
				clickToSelect: true,//点击行即可选中单选/复选框 
				url : '${pageContext.request.contextPath}/user/selectByPage',
				columns : [[
				  {
					  field : 'id',
					  title : '编号',
					  visible : false,
				  },
				  {
					  field: 'Num',
	                  title: 'Num',
	                  width: 3,
	                  formatter: function (value, row, index) {
	                      return index+1;
	                  }
				  },
				  {
					  field : 'username',
					  title : '用户名称',
					  width : 200
				  }, 
				  {
					  field : 'gender',
					  title : '性别',
					  width : 200
				  },
				  {
					  field : 'birthday',
					  title : '生日',
					  width : 400  
				  },
				  {
					  field : 'station',
					  title : '单位',
					  width : 400
				  },  
				  {
					  field : 'salary',
					  title : '工资',
					  width : 200 /*  ,
					  formatter: function(value,row,index){
						  var date = new Date(strTime);
						    return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();   			
					     }    */
				  },  
				  {
					  field : 'telephone',
					  title : '电话',
					  width : 200
				  },  
				  {
					  field : 'remark',
					  title : '备注',
					  width : 400
				  },
				  {
						field : 'roleNames',
						title : '角色',
						width : 400,
						align : 'center'
					},{
					  field : 'action',
					  title : '用户操作',
					  width : 400,
					  formatter: function(value,row,index){
						  return [
						          '<button type="button" class="btn btn-warning edit"  data-toggle="modal" data-target="#updateModal" data-backdrop="static">编辑</button>',
						          '<button type="button" class="btn btn-danger demo3">删除</button>'
						      ].join(' ');			
					     },
					  events : {
						    'click .demo3': function (e, value, row, index) {
						    	swal({
									title:"您确定要删除这条信息吗",text:"删除后将无法恢复，请谨慎操作！",
									type:"warning",
									showCancelButton:true,
									confirmButtonColor:"#DD6B55",
									confirmButtonText:"删除",
									closeOnConfirm:false
									},function(){
										$.ajax({  
								            url:'${pageContext.request.contextPath}/user/delete',  
								            type:'post',  
								            data:{'id':row.id}, 
								            /* dataType: "json",  */
							                /* contentType: "application/x-www-form-urlencoded;charset=UTF-8", */
								            success:function(data){  
								              
								                swal("删除成功！","您已经永久删除了这条信息。","success")
								              	
								              //删除，刷新一下表格的数据
								                var parameter = {silent: true};
								                var c = $('#biaoge').bootstrapTable('refresh', parameter);
								                
								              	
								            }  
								         });
										
									}
								)
						    },
						    'click .edit': function (e, value, row, index) {
						       /* alert('You click edit icon, row: ' + JSON.stringify(row));  */
						       /* alert(row.name); */
						    	$('#updateuserform')[0].reset();
						       $("#updateuserform").validate().resetForm();			
						       
						       	   $("#uid").val(row.id);
							       $("#uusername").val(row.username);
							       $("#uusername").val(row.username);
							       $("#upassword").val("");
							       $("#urepassword").val("");
							       
							       if(row.gender=='男') {
							    	   $("#updateuserform input[name='gender']").eq(1).removeProp("checked");
								       $("#updateuserform input[name='gender']").eq(0).prop("checked","checked");
							       } 
							       if(row.gender=='女'){
							    	   $("#updateuserform input[name='gender']").eq(0).removeProp("checked");
							    	   $("#updateuserform input[name='gender']").eq(1).prop("checked","checked");
							       }
							       
							       $("#ubirthday").val(row.birthday);
							       $("#ustation").val(row.station);
							       $("#usalary").val(row.salary);
							       $("#utelephone").val(row.telephone);
							       $("#uremark").val(row.remark);
							       
							       $("#updateuserform input[name=roleIds]").prop("checked",false);
							       $.ajax({  
						            url:'${pageContext.request.contextPath}/user/selectRolesByUserId',   
						            type:'post',  
						            data:{'userId':row.id}, 
						            /* dataType: "json",  */
					                /* contentType: "application/x-www-form-urlencoded;charset=UTF-8", */
						            success:function(data){ 
						            	
						               /* var strs= new Array(); //定义一数组 
						               strs=data.split(","); //字符分割 
						               for (i=0;i<strs.length ;i++ ) 
						               { 
						               } */
						                $(data.split(",")).each(function(i,dom){
						                	
						                    $("#updateuserform input[id='"+dom+"']").prop("checked",true);
						                   
						                });
						               
						            }  
						         });
						        console.log(value, row, index);
						    },
						    'click .remove': function (e, value, row, index) {
						        /* alert('You click remove icon, row: ' + JSON.stringify(row)); */
						        console.log(value, row, index);
						    }
						}
				  },
				]]
			});
	});
</script>
</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content  animated">
		<div class="row">
			<div class="col-sm-4">
				<div id="nestable-menu">
					<button type="button" class="btn btn-white btn-sm" data-toggle="modal" data-target="#addModal" data-backdrop="static" id="adduserinfo">添加用户</button>
				</div>
			</div>
		</div>
			<div class="col-sm-18">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>用户管理</h5>
					</div>
					<div class="ibox-content">
						<!-- 添加弹出菜单开始 -->
						<div class="modal inmodal" id="addModal" tabindex="-1" role="dialog" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content animated bounceInRight">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span>
										</button>
										<i class="fa fa-laptop modal-icon"></i>
										<h4 class="modal-title">添加用户</h4>
									</div>
									<small class="font-bold">
										<div class="modal-body">
											<div class="ibox float-e-margins">
												<div class="ibox-content">
							
													<form class="form-horizontal m-t" id="adduserform">
														<div class="form-group">
															<label class="col-sm-3 control-label">用户名称：</label>
															<div class="col-sm-8">
																<input id="fname" name="username" class="form-control" required="" aria-required="true">
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">密码：</label>
															<div class="col-sm-8">
																<input id="password" type="password" name="password" class="form-control" required="" aria-required="true">
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">确认密码：</label>
															<div class="col-sm-8">
																<input id="repassword" type="password" name="repassword" equalTo="#password" class="form-control" aria-required="true">
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">性别：</label>
															<div class="row">
																<div class="col-sm-2">
																	<div class="radio i-checks">
																		<label>
																			<input type="radio" value="男" checked="checked" name="gender"> 男</label>
																	</div>
																</div>
																<div class="col-sm-2">
																	<div class="radio i-checks">
																		<label>
																			<input type="radio" value="女" name="gender"> 女</label>
																	</div>
																</div>
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">生日：</label>
															<!-- <div class="col-sm-8">
																<input id="pname" type="text" name="birthday" class="form-control date-picker" 
																data-date-format="yyyy-mm-dd" placeholder="生日"
																aria-required="true">
															</div> -->
															<div class="col-sm-8">
															<input id="releas" class="form-control" type="text" name="birthday" required="" aria-required="true" onfocus="WdatePicker({startDate:'当前时间',dateFmt:'yyyy-MM-dd'})" value="" />
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">单位：</label>
															<div class="col-sm-8">
																<input id="pname" name="station" class="form-control"  aria-required="true">
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">薪水：</label>
															<div class="col-sm-8">
																<input id="pname" name="salary" class="form-control" number="true" aria-required="true">
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">电话：</label>
															<div class="col-sm-8">
																<input id="pname" name="telephone" class="form-control" number="true" aria-required="true">
															</div>
														</div>
														
														<div class="form-group">
															<label class="col-sm-3 control-label">备注：</label>
															<div class="col-sm-8">
																<textarea id="ccomment" name="remark" class="form-control" style= "resize:none" cols="50"  rows="4" aria-required="true" resize="none"></textarea>
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">选择角色：</label>
															<input type="hidden" name="addRoleIds" id="idroles"/>
															<div class="col-sm-8" id="addroleIds">
																
															</div>
															
															<script type="text/javascript">
																	//加载角色数据
																	$(function() {
																   	        loadRole();
																   	  		function loadRole() {
																   	  		//加载checkbox角色数据之前要先清空一下然后在加载数据
																   	  		$("#addroleIds").empty();
																   	  		$("#updateroleIds").empty();
																   	  		
																   			var url = "${pageContext.request.contextPath}/role/selectAll";
																			$.get(url,{},function(data) {
																				for (var i = 0;i < data.length;i++) {
																					var id = data[i].id;
																					var name = data[i].name;
																					//alert(id);
																					//alert(name);
																					$("#addroleIds").append('<input id="'+id+'" value="'+id+'" type="checkbox" name="roleIds"><label for="'+id+'">'+name+'</label>&nbsp;&nbsp;&nbsp;');
																					$("#updateroleIds").append('<input id="'+id+'" value="'+id+'" type="checkbox" name="roleIds"><label for="'+id+'">'+name+'</label>&nbsp;&nbsp;&nbsp;');
																				}
																			});
																   	  }
																});
															</script>
														</div>
														<div class="form-group">
															<div class="col-sm-4 col-sm-offset-3">
																<button class="btn btn-primary" type="submit">添加</button>
																<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
															</div>
														</div>
													</form>
												</div>
											</div>
										</div>
									</small>
								</div>
							</div>
						</div>

						<!-- 修改弹出菜单开始 -->
						<div class="modal inmodal" id="updateModal" tabindex="-1" role="dialog" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content animated bounceInRight">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span>
										</button>
										<i class="fa fa-laptop modal-icon"></i>
										<h4 class="modal-title">修改用户</h4>
									</div>
									<small class="font-bold">
										<div class="modal-body">
											<div class="ibox float-e-margins">
												<div class="ibox-content">
													<form class="form-horizontal m-t" id="updateuserform" method="post">
														<div class="form-group">
															<label class="col-sm-3 control-label">用户名称：</label>
															<div class="col-sm-8">
																<input id="uusername" name="username" class="form-control" required="" aria-required="true">
																<input type="hidden" name="id" id="uid"/>
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">密码：</label>
															<div class="col-sm-8">
																<input id="upassword" type="password" name="password" class="form-control" required="" aria-required="true">
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">确认密码：</label>
															<div class="col-sm-8">
																<input id="urepassword" type="password" name="repassword" class="form-control" equalTo="#upassword" aria-required="true">
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">性别：</label>
															<div class="row">
																<div class="col-sm-2">
																	<div>
																		<label>
																			<input type="radio" value="男" checked="checked" name="gender"> 男</label>
																	</div>
																</div>
																<div class="col-sm-2">
																	<div>
																		<label>
																			<input type="radio" value="女" name="gender"> 女</label>
																	</div>
																</div>
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">生日：</label>
															<div class="col-sm-8">
																<!-- <input id="ubirthday" name="birthday" class="form-control"  aria-required="true"> -->
																<input id="ubirthday" class="form-control" required="" aria-required="true" type="text" name="birthday" onfocus="WdatePicker({startDate:'当前时间',dateFmt:'yyyy-MM-dd'})" value="" />
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">单位：</label>
															<div class="col-sm-8">
																<input id="ustation" name="station" class="form-control"  aria-required="true">
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">薪水：</label>
															<div class="col-sm-8">
																<input id="usalary" name="salary" class="form-control" number="true" aria-required="true">
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">电话：</label>
															<div class="col-sm-8">
																<input id="utelephone" name="telephone" class="form-control"  number="true" aria-required="true">
															</div>
														</div>
														
														<div class="form-group">
															<label class="col-sm-3 control-label">备注：</label>
															<div class="col-sm-8">
																<textarea id="uremark" name="remark" class="form-control" style= "resize:none" cols="50"  rows="4" aria-required="true" resize="none"></textarea>
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-3 control-label">选择角色：</label>
															
															<input type="hidden" name="addRoleIds"/>
															
															<div class="col-sm-8" id="updateroleIds">
																
															</div>
														</div>
														<div class="form-group">
															<div class="col-sm-4 col-sm-offset-3">
																<button class="btn btn-primary" type="submit" id="update">修改</button>
																<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
															</div>
														</div>
													</form>
												</div>
											</div>
										</div>
									</small>
								</div>
							</div>
						</div>

						<table id="biaoge">
						</table>
					</div>
					</div>
				</div>
			</div>
		</div>
		
</body>

</html>

页面效果：

173711_mfEP_660595.png

 

转载于:https://my.oschina.net/u/660595/blog/693586

weixin_34319817
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery.validate 版本大全
03-04
jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....
jquery.validate.min.js
06-18
修改validate的remote校验，支持处理返回格式{success:false,message:"提示消息"}
validate 的用法
记录技术点点之路
08-26 272
做个备份
summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
weixin_30715523的博客
03-22 340
1.使用summernote富文本编辑器提交图片到服务器 　　在使用bootstrap中，我们用到了summernote富文本编辑器，使用summernote将图片上传到服务器中，参考我的上篇文章http://www.cnblogs.com/jingmin/p/6592325.html 2.在使用summernote编辑完文本，使用validate进行表单验证出现问题的解决方案 ...
IE8兼容Jquery.validate.js的问题
10-20
在JavaScript的世界里，jQuery库和它的插件jQuery.validate.js是前端开发者进行表单验证的得力工具。然而，由于浏览器的差异性，尤其是在处理某些特定功能时，可能会遇到兼容性问题，尤其是对于像IE8这样的老版本...
jquery.validate.min.js 1.16.0
03-21
jquery.validate.min.js 1.16.0插件，jquery验证
【React 】开发环境搭建详细指南
lph159的博客
07-24 1105
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 328
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 122
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 158
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 679
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
爬虫基本原理入门
RHeng的博客
07-25 1034
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
typescript中type和interface有什么区别，如何选择？
闻人放歌的三寸青草园圃
07-23 156
【代码】typescript中type和interface有什么区别，如何选择？
牛客JS题（二）直角三角形
不起眼小菜菜的博客
07-25 221
注释很详细，直接上代码……
如何关闭页面报错的遮罩层
karlaofsky的博客
07-25 204
在vue.config.js中添加如下配置，问题：如何关闭页面报错的遮罩层。
刷新当前页面
最新发布
Garbrielle的博客
07-26 164
相当于按了 F5, 因此缺点也很明显, 体验感不佳, 因为要加载所有页面资源相对较慢, 比较耗时.
React组件定义
qq_39460057的博客
07-23 312
组件是是构建用户界面（UI）的基础，它可以是一个输入框、按钮、也可以是一整个页面。
jQuery验证控件jquery.validate.js全中文使用教程及常见规则详解
jQuery验证控件jquery.validate.js是一个强大的JavaScript插件，用于增强用户在网页表单提交前对输入数据的有效性进行验证。它为前端开发人员提供了一种方便的方式来实现客户端表单验证，提升用户体验并减少服务器端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值