欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

account

程序员文章站 2022-07-13 22:06:42
...
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="learn" uri="http://itcast.cn/common/"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Learn LMS - Update profile</title>

		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css">
	    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery.mCustomScrollbar.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style2.css">
		<style type="text/css">
			#container {
				width: 100%;
				height: 100%;
				margin: auto;
				background-image: url(${pageContext.request.contextPath}/img/BG1.jpg);
			}
			
			#logo_center {
				width: 100%;
				height: 15%;
				display: flex;
				justify-content: center;
			}
			
			#green_bar {
				width: 100%;
				height: 30px;
				background-color: #15a2b3;
			}
			
			input {
				width: 50%;
				height: 100%;
			}
			
			#bottom {
				width: 100%;
				text-align: center;
				font-size: 15px;
			}
	
			input {
				border: none;
				font-size: 14px;
				line-height: 1.5em;
				padding: 0;
				-webkit-appearance: none;
			}
	
			
			/* ---------- register ---------- */
			#account_table form input {
				height: 40px;
			}
			
			#account_table form input[type="text"], input[type="password"] {
				background-color: #fff;
				border-radius: 0px 3px 3px 0px;
				color: #000;
				margin-bottom: 1em;
				padding: 0 16px;
				width: 50%;
			}
			
			#account_table form button {
				font-weight: bold;
				/* margin-bottom: 2em; */
				padding: 5px 10px;
				height: 35px;
				width:50%;
			}
			
			#account_table form button:hover {
				background-color: #1c6299;
			}
	
			#profile_title {
				/*border:1px solid red;*/
				width: 50%;
				color: #15a2b3;
				font-size: 24px;
				font-weight: bold;
				display: flex;
				justify-content: center;
				margin: 0 auto;
				padding-top:5%;
				padding-bottom:1%;
			}
		</style>

	    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/solid.js"></script>
		<script src="${pageContext.request.contextPath}/js/fontawesome.js"></script>
		<script src="${pageContext.request.contextPath}/js/jquery.mCustomScrollbar.concat.min.js"></script>
	  	<script src="${pageContext.request.contextPath}/js/popper.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
		
   		<script type="text/javascript">
		    $(document).ready(function () {
		        $("#sidebar").mCustomScrollbar({
		            theme: "minimal"
		        });
		
		        $('#sidebarCollapse').on('click', function () {
		            $('#sidebar, #content').toggleClass('active');
		            $('.collapse.in').toggleClass('in');
		            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
		        });

		    });
	    
		    function checkForm(){
				//alert("aa");
				//校验用户名
				// 1.获取用户输入的数据
				var uValue = document.getElementById("userName").value;
				//alert(uValue);
				if(uValue==""){
					//2.给出错误提示信息
					alert('Username cannot be empty!');
					return false;
				}		
				
				// 2.校验Current Password
				var pValue = document.getElementById("currentPassword").value;
				if(pValue==""){
					alert('Current password cannot be empty!');
					return false;
				}
				
				// 3.校验New Password
				var pValue = document.getElementById("newPassword").value;
				if(pValue==""){
					alert('New password cannot be empty!');
					return false;
				}
				
				// 4.校验确认密码
				var rpValue = document.getElementById("confirmpwd").value;
				if(rpValue != pValue){
					alert('Passwords are inconsistent!');
					return false;
				} 
				
				// 5.校验邮箱
				var eValue = document.getElementById("userMailAddress").value;
				if(!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(eValue)){
					alert('Incorrect email format!');
					return false;
				}
				return true;
			}
			
			function checkRePassword(id,info) {
				var pValue = document.getElementById("newPassword").value;
				var rpValue = document.getElementById("confirmpwd").value;
				if(rpValue != pValue){
					document.getElementById(id + "span").innerHTML = "<font style='color:red'>"+ info +"！</font>";				
				}else{
					document.getElementById(id + "span").innerHTML = "";
				}			
			}
			
			function checkEmail(id,info){
				var eValue = document.getElementById(id).value;
				if(!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(eValue)){
					document.getElementById(id + "span").innerHTML = "<font style='color:red'>"+ info +"！</font>";
				}else{
					document.getElementById(id + "span").innerHTML = "";
				}
			}
		
			function editUser() {
				var flag = false;
				flag = checkForm();
				
				if(flag){				
					$.post("<%=basePath%>user/editUser.action",$("#edit_user_form").serialize(), function(data){
						alert(data.message);
						
						if ((data.message).includes("successfully")) {
							window.location.replace("${pageContext.request.contextPath}/community/dashboard.action");
						}
					});
				}
			}
    	</script>
	</head>
	
	<body>
		<div class="wrapper">
	        <!-- Sidebar  -->
	        <nav id="sidebar">
	            <div class="sidebar-header">
	                <font color="#1c6299" size="7" face="Arial"><b>Learn</b></font>
	                <font color="#15a2b3" size="7" face="Helvetica"><b>tech</b></font>
	                <br><font color="#5d5b5d" size="5" face="Calibri">Smart LMS v1.0.1</font>
	            </div>
	            
	            <div class="sidebar-username"><font color="black">Welcome, ${currentUser.userName}</font></div>
	            	<ul class="list-unstyled components">            
		                <li>
		                    <a href="${pageContext.request.contextPath}/community/dashboard.action">Home dashboard</a>
		                </li>
		                <li>
		                    <a href="${pageContext.request.contextPath}/community/controlLights.action">Control lights</a>
		                </li>
		                <li>
	                    	<a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Configure lights</a>
	                    	<ul class="collapse list-unstyled" id="pageSubmenu2">
		                        <li>
		                            <a href="${pageContext.request.contextPath}/configParam.action">SPS100</a>
		                        </li>
		                        <li>
		                            <a href="${pageContext.request.contextPath}/sps200Config.action">SPS200</a>
		                        </li>
		                        <li>
		                            <a href="${pageContext.request.contextPath}/photoParam.action">Photosensor</a>
		                        </li>
		                        <li>
	                            	<a href="${pageContext.request.contextPath}/configAddNew.action">Add new data</a>
		                        </li>
	                    	</ul>
	                	</li>
	                	<li>
		                	<a href="#pageSubmenu3" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Manage account</a>
		                    <ul class="list-unstyled" id="pageSubmenu3">
		                   		<li class="active">
		                            <a href="${pageContext.request.contextPath}/user/user_account.action">Update profile</a>
		                        </li>
								<c:if test="${currentUser.userType == 1}">	                        
			                        <li>
			                            <a href="${pageContext.request.contextPath}/user/user_register.action">Register new user</a>
			                        </li>
									<li>
			                            <a href="${pageContext.request.contextPath}/user/user_management.action">User management</a>
			                        </li>		                        
		                        </c:if>
		                    </ul>
		                </li>
		            </ul>
	
	            	<ul class="list-unstyled CTAs">
		                <li>
	                    <a href="${pageContext.request.contextPath}/user/logout.action" class="download">Logout</a>
		                </li>
						<li><br>
							<div id="time" style="text-align:center">
								<script>
									updateTime();
									function updateTime() {
										var date = new Date().toLocaleString();
										var day = new Date().getDay();
										var datetime;
										if (day == 0) {
											day = "<br>Sunday";
										} else if (day == 1) {
											day = "<br>Monday";
										} else if (day == 2) {
											day = "<br>Tuesday";
										} else if (day == 3) {
											day = "<br>Wednesday";
										} else if (day == 4) {
											day = "<br>Thursday";
										} else if (day == 5) {
											day = "<br>Friday";
										} else {
											day = "<br>Saturday";
										}
		
										datetime = date + day;
										document.getElementById('time').innerHTML = datetime;
									}
									setInterval("updateTime()", 1000);
								</script>
							</div>
						</li>
					</ul>
		        </nav>
	        
				<div id="content">
					<div class="main">
						<div id="container">			
						<div id="profile_title">Update profile</div>
	
						<div id="first_hr">
							<hr align="center" width="80%" color="#b5b7b9">
						</div>
	
						<div id="account_table">
							<form id="edit_user_form">
								<table border="0" width="75%" align="center">
									<tr>
										<td width="40px">
											<label for="userName"><span style="color: green;">*</span>&nbsp;Username</label>
										</td>
										<td width="255px">
											<input type="text" id="userName" name="userName" placeholder="Enter username" value="${currentUser.userName}">&nbsp;
											<span id="userNamespan"></span>
										</td>
									</tr>
									<tr>
										<td width="40px">
											<label for="currentPassword"><span style="color:green;">*</span>&nbsp;Current Password</label>
										</td>
										<td width="255px">
											<input type="password" id="currentPassword" name="currentPassword" placeholder="Enter current password">&nbsp;
											<span id="currentPasswordspan"></span>
										</td>
									</tr>
									<tr>
										<td width="40px">
											<label for="newPassword"><span style="color:green;">*</span>&nbsp;New Password</label>
										</td>
										<td width="255px">
											<input type="password" id="newPassword" name="newPassword" placeholder="Enter new password">&nbsp;<span id="newPasswordspan"></span>
										</td>
									</tr>
									<tr>
										<td width="40px">
											<label for="confirmpwd"><span style="color:green;">*</span>&nbsp;Confirm Password</label>
										</td>
										<td width="255px">
											<input type="password" id="confirmpwd" name="confirmpwd" οnblur="checkRePassword('confirmpwd','Passwords are inconsistent!')" placeholder="Enter password again">&nbsp;<span id="confirmpwdspan"></span>
										</td>
									</tr>
									<tr>
										<td width="40px">
											<label for="userMailAddress"><span style="color:green;">*</span>&nbsp;E-Mail</label>
										</td>
										<td width="255px">
											<input type="text" id="userMailAddress" name="userMailAddress" οnblur="checkEmail('userMailAddress','Incorrect email format')" placeholder="please input Email" value="${currentUser.userMailAddress}">&nbsp;<span id="userMailAddressspan"></span>
										</td>
									</tr>
									<tr>
										<td width="50">
											<label for="userPhoneNumber"><span style="color: green;">*</span>&nbsp;Phone&nbsp;Number</label>
										</td>
										<td width="255">
											<input type="text" id="userPhoneNumber" name="userPhoneNumber" placeholder="Enter phone number" value="${currentUser.userPhoneNumber}">&nbsp;
											<span id="userPhoneNumberspan"></span>
										</td>
									</tr>
									<tr>
										<td colspan="2" align="center">
										<br>
											<button class="btn btn-primary" type="button" id="account_button" οnclick="editUser()">Update</button>
										</td>
									</tr>
								</table>
							</form><br><br>
						</div>
					</div>
	
					<div id="bottom">
						<p>
							<br><font color="#999">Copyright &copy; 1986 - 2018</font> <b>Learn Group Ltd. All rights reserved.</b>
						</p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

 

上一篇： vue项目中div切换显示与隐藏状态时的动画效果

下一篇： jquery控制隐藏显示切换

推荐阅读