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"/>
 					   
         	<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>
				   
        <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 登录页面的实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • javaweb登录验证码的实现方法

    本文实例为大家分享了javaweb登录验证码的具体代码,供大家参考,具体内容如下 使用: Controller:生成验证码 @RequestMapping("/user/check.jpg") public void createCode(HttpServletRequest request, HttpServletResponse response) throws IOException { // 通知浏览器不要缓存 response.setHeader("Expires&

  • JavaWeb项目中dll文件动态加载方法解析(详细步骤)

    相信很多做Java的朋友都有过用Java调用JNI实现调用C或C++方法的经历,那么Java Web中又如何实现DLL/SO文件的动态加载方法呢.今天就给大家带来一篇JAVA Web项目中DLL/SO文件动态加载方法的文章. 在Java Web项目中,我们经常会用到通过JNI调用dll动态库文件来实现一些JAVA不能实现的功能,或者是一些第三方dll插件.通常的做法是将这些dll文件复制到 %JAVA_HOME%\jre\bin\ 文件夹或者 应用中间件(Tomcat|Weblogic)的bin

  • Java开发之普通web项目转为Maven项目的方法

    前言 Maven是基于项目对象模型(Project Object Model),可以通过一小段描述信息来管理项目的构建.报告和文档的项目管理工具,提供了一个仓库的概念,统一管理项目所依赖的第三方jar包,最大可能避免了由于环境变量的不同在不同电脑之间无法运行的问题,Struts2.Hibernate都是采用maven部署的项目. 现在网上有许多普通web项目转换为maven项目的博文,但由于项目的不同,所需的步骤及必须的转换步骤也不同.因此,本文章将以一个基于SpringMVC,Spring,H

  • java web开发之购物车功能实现示例代码

    之前没有接触过购物车的东东,也不知道购物车应该怎么做,所以在查询了很多资料,总结一下购物车的功能实现. 查询的资料,找到三种方法: 1.用cookie实现购物车: 2.用session实现购物车: 3.用cookie和数据库(购物车信息持久化)实现购物车: 分析一下这三种方法的优缺点: 1.单纯有cookie实现购物车,这样的购物车不是很理想,设想一下,如果客户端的浏览器把cookie给禁用了,这种方法就会在这里流产- 2.session中保存购物车的信息,这个只是在一个会话中可用,如果用户没有

  • JavaWeb项目FullCalendar日历插件使用的示例代码

    本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下: 使用FullCalendar需要引用的文件 1.css文件 2.js文件 <link href="${base}/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="external nofollow" rel="stylesheet" type="text/c

  • javaWeb实现学生信息管理系统

    本文为大家分享了javaWeb实现学生信息管理系统,供大家参考,具体内容如下 初始版 初始版是没有加分页的.因为没怎么学过前端,界面很丑陋.主要技术:JSP,JavaBean,servlet,JDBC主要页面如下: 登录页面 主页 添加学生 查看所有学生 查询学生 工程目录 数据库 两个表,user表和student表.为了使用DBUtils工具,一定要注意数据库表的属性的命名和JavaBean的get(),set() 方法的匹配.比如t_user表里的uname,在JavaBean中是:pri

  • 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

  • 基于java web获取网页访问次数代码实例

    这篇文章主要介绍了基于java web获取网页访问次数代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 ServletContext context = request.getServletContext(); /** * 从ServletContext中获取计数器对象 */ Integer count = (Integer) context.getAttribute("counter"); /** * 如果为空,则在Servl

  • java web response提供文件下载功能的实例讲解

    webapp项目的结构如下图: download.html文件的内容如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1>资源下载:</h1> <p> 单纯地使用a标签时,只有浏览器不能解析的文

  • java中stack(栈)的使用代码实例

    java中stack类继承于vector,其特性为后进先出(lastinfirstout). 入栈和出栈实例图: 实例图的java代码实例: package com.lanhuigu.java.ListTest; import java.util.Stack; public class StackTest { public static void main(String[] args) { Stack<String> staffs = new Stack<String>(); //

  • Java中io流解析及代码实例

    IO流 Java中IO流分为两种,字节流和字符流,顾名思义字节流就是按照字节来读取和写入的,字符刘是按照字符来存取的:常用的文件读取用的就是字符流,在网络通信里面用的就是字节流 下面这张图是Java中IO流的总体框架: 字节流 Java中字节流一般都是以stream结尾的,输入的字节流叫InputStream,输出字节流叫OutputStream;InputStream和OutputStream是表示自己输入/输出的所有类的超类,是抽象类(abstract) 常用的字节流有: 1.FileInp

  • java获取当前时间并格式化代码实例

    这篇文章主要介绍了java获取当前时间并格式化代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 private static final DateTimeFormatter FORMAT_FOURTEEN = DateTimeFormatter.ofPattern("yyyyMMddHHmmss"); private static final DateTimeFormatter FORMAT_DATE = DateTimeFor

  • java一个数据整理的方法代码实例

    这篇文章主要介绍了java一个数据整理的方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 import java.sql.*; public class Main { //本地数据库 // static final String JDBC_DRIVER = "com.mysql.jdbc.Driver"; // static final String DB_URL = "jdbc:mysql://127.0.0.1

  • java 对象参数去空格方式代码实例

    这篇文章主要介绍了java 对象参数去空格方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 import java.lang.reflect.Field; import java.lang.reflect.Method; public class Test { /** * 去掉bean中所有属性为字符串的前后空格 * * @param bean * @throws Exception */ public static void bea

  • Java数组集合的深度复制代码实例

    这篇文章主要介绍了Java数组集合的深度复制代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Java当我们想要对一个数组进行一些操作,同时又不希望对原来的数组数据有影响的时候,使用引用是不能满足我们的需求的, 这时候我们可以使用System.arraycopy()方法实现,对用这两种复制方式,我们习惯称前者为浅复制,后者为深复制.深复制的 实现方法如下: public static void arraycopyTest() { int[

  • Vue请求java服务端并返回数据代码实例

    这篇文章主要介绍了Vue请求java服务端并返回数据代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近在自学vue怎么与java进行数据交互.其实axios还是挺简单的,与ajax请求几乎一样,无外乎也就是要解决下跨域的问题. 废话不多说了,直接贴代码,一看就懂! //向springmvc Controller发起请求,传递一个参数 get请求(带参数传递) axios.get('http://127.0.0.1:8088/inas/

随机推荐