登录
当前位置： 首页 > 编程笔记 >

Java Web 登录页面的实现代码实例

何涵育
2023-03-14
本文向大家介绍Java Web 登录页面的实现代码实例，包括了Java Web 登录页面的实现代码实例的使用技巧和注意事项，需要的朋友参考一下

代码如下~

内有详细解释，最后有照片！

<html>
<script type="text/javascript">
function inUser(){
	username_mess.style.visibility="visible";
}
function outUser(){
    //获取name 为 usesrname 的文本
	  u=f1.username.value;
 
	  f1.username.style.border="1px solid AAAAAA";
	  if(u==""){
	  	username_mess.style.visibility="hidden";
	  	return;
  	}
    //正则表达式
  	reg=/.{4,20}/;
  
		if(!reg.test(u)){
			username_mess.innerHTML="用户名长度只能在4-20位字符之间";
			username_mess.style.color="red";
			f1.username.style.color="red";
			f1.username.style.border="1px solid red";
			username_ok.style.visibility="hidden";
			return;
		}
		reg=/^[\u4e00-\u9fa5 \w-]{4,20}$/;
		if(reg.test(u)){
			username_ok.style.visibility="visible";
			username_mess.innerHTML="";
			f1.username.style.color="black";
		}else{
			username_mess.innerHTML="用户名只能由中文、英文、数字及'_'、'-'组成";
			username_mess.style.color="red";
			f1.username.style.color="red";
			f1.username.style.border="1px solid red";
			username_ok.style.visibility="hidden";
		}
	}
function inMail(){
	mail_mess.style.visibility="visible";
}
function outMail(){
	v=f1.mail.value;
	f1.mail.style.border="1px solid AAAAAA";
	if(v==""){
		mail_mess.style.visibility="hidden";
		return;
	}
		reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
		if(reg.test(v)){
			mail_ok.style.visibility="visible";
			mail_mess.innerHTML="";
			f1.mail.style.color="black";
		}else{
			//更改id mail_mess 的文字
			mail_mess.innerHTML="请输入正确的邮箱地址，例如：X@X.X";
			//设置id mail_mess 字体的颜色
			mail_mess.style.color="red";
			//设置 id 为f1 里的 name 为 mail 文本框 内的文字颜色 
			f1.mail.style.color="red";
			//设置文本框颜色以及框的大小
			f1.mail.style.border="1px solid red";
			mail_ok.style.visibility="hidden";
		}
	}
</script>
 
<!-- 
以下为 class 标签的 应用函数	+++
 -->
<style type="text/css">
.label{
	position:absolute ;
	right:70%;
}
 
.fi{
	position:relative ;
	left:30%;
}
.clr{
	height:20px ;
	color:AAAAAA;
	font-size:12px;
	visibility:hidden;
}
 
.s{
	font-weight:lighter ;
	color:red;
}
 
.text{
	font-family:宋体;
	width:200px;
}
 
.v{
	color:cccccc;
	font-size:12px ;
}
 
a{
	font-size:12px ;
}
 
.btn-img{
	position:relative ;
	left:30%;
}
.ok{
	background-image:url('ok.jpg');
	width:17px;
	height:16px;
	visibility:hidden;
}
 
</style>
<body>
	<form id="f1">
  			<div class="label"><b class="s">1*</b>用户名：</div>
	    <div class="fi">
        		<input type="text" name="username" class="text" tabindex="1" onFocus="inUser()" onBlur="outUser()"/><label id="username_ok" class="ok"><img src="ok.jpg" width=17px height=16px/></label>
<br/><div id="username_mess" class="clr">4-20位字符，可由中文、英文、数字及"_"、"-"组成</div>
			</div>
 
      <div class="label"><b class="s">*</b>设置密码：</div>
	    <div class="fi">
        	<input type="password" name="pwd" class="text" tabindex="2"/>
 					&nbsp;&nbsp;&nbsp;
         	<input type="checkbox" name="visi" id="viewpwd"/>
          <label class="v">显示密码字符</label><br/>
          <div class="clr"></div>
      </div>
      
	    <div class="label"><b class="s">*</b>确认密码：</div>
	    <div class="fi">
    		<input type="password" name="pwd2" class="text" tabindex="3"/>
<br/><div class="clr"></div>
	    </div>
 
			<div class="label"><b class="s">*</b>邮箱：</div>
		  <div class="fi">
      	<input type="text" name="mail" class="text" tabindex="4" onFocus="inMail()" onBlur="outMail()"/>
      	<label id="mail_ok" class="ok"><img src="ok.jpg" width=17px height=16px/></label>
				&nbsp;&nbsp;&nbsp;
        <label class="v">免费邮箱：</label>
				<a href="">搜狐</a> 
				<a href="">网易</a><br/>
		    <div id="mail_mess" class="clr">请输入正确的邮箱地址</div>
			</div>
 
		  <div class="label">推荐人用户名：</div>
		  <div class="fi">
    	<input type="text" name="referrer" class="text" 
value="可不填" tabindex="5"/>
<br/>
      	<div class="clr"></div>
      </div>
			<input type="button" class="btn-img" id="registsubmit" 
value="同意以下协议，提交" tabindex="8"/>
		</form>
	</body>
</html>

以上所述是小编给大家介绍的Java Web 登录页面的实现详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！

 类似资料：
  • JavaWeb登陆功能实现代码

    本文向大家介绍JavaWeb登陆功能实现代码，包括了JavaWeb登陆功能实现代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaWeb登陆功能的方法，供大家参考，具体内容如下 首先我们要JavaWeb登陆的基本流程：JSP页面发送请求——>Servlet——>Servlet通过调用方法从数据库中得到数据并将结果返回页面。 我们先建立三个jsp页面，包括login.jsp(登

  • Boostrap实现的登录界面实例代码

    本文向大家介绍Boostrap实现的登录界面实例代码，包括了Boostrap实现的登录界面实例代码的使用技巧和注意事项，需要的朋友参考一下 Bootstrap它是一个开源的web开发前端框架。 这几天我看了下Bootstrap的官方文档。看到其中的Basic-form,突然想实现下登录界面。然后想了下实现的思路，于是就打开了桌面的H5 builder码起来。代码实现起来其实不难，但是碰到个问题，就

  • Python ldap实现登录实例代码

    本文向大家介绍Python ldap实现登录实例代码，包括了Python ldap实现登录实例代码的使用技巧和注意事项，需要的朋友参考一下 下面一段代码是小编给大家介绍的Python ldap实现登录实例代码，一起看看吧

  • Android实现注册登录界面的实例代码

    本文向大家介绍Android实现注册登录界面的实例代码，包括了Android实现注册登录界面的实例代码的使用技巧和注意事项，需要的朋友参考一下 本文讲述了在linux命令下导出导入.sql文件的方法。分享给大家供大家参考，具体如下： AndroidManifest.xml MainActivity.java login.java register.java activity_main.xml lo

  • php实现登录页面的简单实例

    本文向大家介绍php实现登录页面的简单实例，包括了php实现登录页面的简单实例的使用技巧和注意事项，需要的朋友参考一下 开始自然是从最简单的功能起步，我第一个任务选择了做一个登录操作，其实也没想象中那么简单。 1、首先自然是连接和创建数据库 这部分我写在model.php中 2、写前台页面，为了熟练前端框架，使用layui框架界面，前面有一段js代码，来判断用户名密码输入是否为空。 3、login

  • 重写 ajax 实现 session 超时跳转到登录页面实例代码

    本文向大家介绍重写 ajax 实现 session 超时跳转到登录页面实例代码，包括了重写 ajax 实现 session 超时跳转到登录页面实例代码的使用技巧和注意事项，需要的朋友参考一下 问题：使用window.location.href来跳转页面的时候，后端只需实现一个过滤器就可以在session超时的情况下重定向到登陆页面。但是使用ajax呢？使用ajax来执行会发生302错误，并且页面不

相关阅读

php实现登录页面的简单实例重写 ajax 实现 session 超时跳转到登录页面实例代码vue+axios实现登录拦截的实例代码基于Python的自媒体小助手---登录页面的实现代码Vue实战之vue登录验证的实现代码

相关文章

[实例]抓取多级页面数据知乎实习一面记录实习记录 阿里云一面大数据实习面试记录大数据实习面试记录

相关问答

JSP Servlet中的登录页面C#ASP。NET单点登录实现Spring Security-UserDetailsService实现-登录失败如何正确实现linkedIn登录？登录页面不会重定向到路由到登录页面

相关工具

md5和sha加密代码实现最简单代码实现九宫格读取txt并实现翻页效果JavaWeb-CommunityJavaWeb Ant Pro

相关文档

基于 Node.js 的 HTTPS MITM 中间人代理的原理和实现如何实现自己的 jQueryRedis 设计与实现各种算法的 Python 实现方案代码整洁的 JavaScript
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.