javascript与jsp的实例一

最新推荐文章于 2023-07-17 21:37:38 发布

从放弃到开始

最新推荐文章于 2023-07-17 21:37:38 发布

阅读量949

点赞数

分类专栏： js专题文章标签： javascript 注册登录

本文链接：https://blog.csdn.net/qq_30764991/article/details/86435972

版权

js专题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

javascript与jsp的实例练习一：对于新手来说还是有一点帮助的，高手可以忽略。

总的效果图如下：效果差，后期会介绍其他实例，欢迎关注。

如果对您有帮助，请多多支持.多少都是您的心意与支持，一分也是爱，再次感谢！！！打开支付宝首页搜“556723462”领红包，领到大红包的小伙伴赶紧使用哦！

支付宝赞赏：记得点击下面的余额宝，红包可能要大些。

注意：余额宝红包有效期三天（72小时）在有效期内
余额宝红包使用完或过期才能有机会领取下个余额宝红包，感谢大家的支持！您的支持，我会继续分享更多的文章，欢迎关注！

注册页面如下图：

首页如下图：

代码如下：从简单到复杂，技术需要不断积累。从放弃到开始，从开始到放弃。路是自己选择的，不管怎么样，努力过，奋斗过，如果技术不好，就请再多学习，一起共勉。

regist注册页面：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<script type="text/javascript">
  		function changeImg(img){
  			img.src = img.src+"?time="+new Date().getTime();
  		}
  		function checkForm(){
  			var canSub = true;
  			//1.非空校验
  			canSub = checkNull("username","用户名不能为空!") && canSub;
  			canSub = checkNull("password","密码不能为空!") && canSub;
  			canSub = checkNull("password2","确认密码不能为空!") && canSub;
  			canSub = checkNull("nickname","昵称不能为空!") && canSub;
  			canSub = checkNull("email","邮箱不能为空!") && canSub;
  			canSub = checkNull("valistr","验证码不能为空!") && canSub;
  			
  			//2.两次密码一致的校验
  			var psw1 = document.getElementsByName("password")[0].value;
  			var psw2 = document.getElementsByName("password2")[0].value;
  			if(psw1 != psw2){
  				document.getElementById("password2_msg").innerHTML = "<font color='red'>两次密码不一致!</font>";
  				canSub = false;
  			}
  			
  			//3.邮箱格式校验:sssss@xxx.xxx.xxx.xxx 
			var email = document.getElementsByName("email")[0].value;
			if( email!= null && email != "" && !/^\w+@\w+(\.\w+)+$/.test(email)){
				document.getElementById("email_msg").innerHTML = "<font color='red'>邮箱格式不正确!</font>";
  				canSub = false;
			}
  			
  			return canSub;
  		
  		}
  		function checkNull(name,msg){
  			document.getElementById(name+"_msg").innerHTML = "";
  			var objValue = document.getElementsByName(name)[0].value;
  			if(objValue == null || objValue == ""){
				document.getElementById(name+"_msg").innerHTML = "<font color='red'>"+msg+"</font>";
  				return false;
  			}
  			return true;
  		}
  	</script>
  </head>
  <body style="text-align: center;">
  <div align="center" >
  	<h1>欢迎来到12306火车订票系统注册</h1><hr>
  	<div class="crumbs">
    	您现在的位置：<a href="/" shape="rect">客运首页</a>
&nbsp;>&nbsp;<a href="/" shape="rect">注册</a>
</div>
  	<form action="/RegistServlet" method="POST" onsubmit="return checkForm()">
  		<table>
  			<tr>
  				<td <span class="required" style="background: red">*</span>>用户名:</td>
  				<div class="lay-bd"><ul class="reg-list"><li><div class="label"><span class="required">*</span>
用 户 名：</div>
  				<td><input type="text" placeholder="用户名设置成功后不可修改" style="background:gray" name="username" value="${param.username }"/></td>
  				<td id="username_msg"></td>
  			</tr>
  			<tr>
  				<td>密码:</td>
  				<td><input type="password"  placeholder="6-20位字母、数字或符号" name="password"/></td>
  				<td id="password_msg"></td>
  			</tr>
  			<tr>
  				<td>确认密码:</td>
  				<td><input type="password"  placeholder="请再次输入您的登录密码" name="password2"/></td>
  				<td id="password2_msg"></td>
  			</tr>
  			<tr>
  				<td>证件类型:</td>
  				<td>
					<select name="type">
						<option value="中国民居身份证">中国民居身份证</option>
						<option value="港澳居民来往内地通行证">港澳居民来往内地通行证</option>
						<option value="台湾居民来往内地通行证">台湾居民来往内地通行证</option>
						<option value="护照">护照</option>
					</select>
				</td><tr/>
  				<td >
  					<input type="radio" name="idTypeRadio" value="中国民居身份证" />中国居民身份证</label><br/>
  					<input type="radio" name="idTypeRadio" value="港澳居民来往内地通行证" />港澳居民来往内地通行证<br/>
  					<input type="radio" name="idTypeRadio" value="台湾居民来往内地通行证" />台湾居民来往内地通行证<br/>
  					<input type="radio" name="idTypeRadio" value="护照" />护照<br/>
  				</td>
  				<td id="password2_msg"></td>
  			</tr>
  			<tr>
  				<td>昵称:</td>
  				<td><input type="text" placeholder="请输入昵称" name="nickname" value="${param.nickname }"/></td>
  				<td id="nickname_msg"></td>
  			</tr>
  			<tr>
  				<td>邮箱:</td>
  				<td><input type="text" placeholder="请输入邮箱" name="email" value="${param.email }"/></td>
  				<td id="email_msg"></td>
  			</tr>
  			<tr>
  				<td>验证码:</td>
  				<td><input type="text" placeholder="请输入验证码" name="valistr"/></td>
  				<td id="valistr_msg">${msg }</td>
  			</tr>
  			<tr>
  				<td><input type="submit" value="注册用户"/></td>
  				<td><img src="/ValiImg" onclick="changeImg(this)" style="cursor: pointer;"/></td>
  			</tr>
  			
  		</table>
  	</form>
  	</div>
  </body>
  <a href="${pageContext.request.contextPath}/index.jsp">返回首页</a>
</html>

index.jsp主页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
  </head>
  
  <body style="text-align: center;">
    <h1>欢迎来到12306火车订票系统</h1>
    <!--如果获取的session中的user为空，，提示欢迎光临，游客  -->
    <c:if test="${sessionScope.user==null }">
    	欢迎光临，游客
    </c:if>
   <%--  <a href="${pageContext.request.contextPath }/regist.jsp">注册</a> --%>
    <a href="/login.jsp">登录</a>
    <!--如果获取的session中的user不为空，进入跳转页面  -->
    <c:if test="${sessionScope.user!=null }">
    	欢迎回来，${sessionScope.user.username};
    	 <a href="/LogoutServlet">注销</a>
    </c:if>
   <a href="${pageContext.request.contextPath }/regist1.jsp">用户注册</a>
   <a href="${pageContext.request.contextPath }/regist.jsp">我的用户注册</a>
  </body>
</html>

从放弃到开始

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javascript与jsp的实例一

javascript与jsp的实例练习一：对于新手来说还是有一点帮助的，高手可以忽略。总的效果图如下：效果差，后期会介绍其他实例，欢迎关注。如果对您有帮助，请多多支持.多少都是您的心意与支持，一分也是爱，再次感谢！！！打开支付宝首页搜“556723462”领红包，领到大红包的小伙伴赶紧使用哦！支付宝赞赏：记得点击下面的余额宝，红包可能要大些。注意：余额宝红包有效期三天（72...
复制链接

扫一扫