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

 更新时间:2019年03月25日 14:54:04   作者:如果东京不快乐  
这篇文章主要介绍了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 登录页面的实现详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 如何利用Java输出链表中倒数第k个结点

    如何利用Java输出链表中倒数第k个结点

    这篇文章主要给大家介绍了关于如何利用Java输出链表中倒数第k个结点的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用java具有一定的参考学习价值,需要的朋友可以参考下
    2021-12-12
  • 浅谈Java平台无关性

    浅谈Java平台无关性

    这篇文章主要介绍了浅谈Java平台无关性,对此感兴趣的同学,可以多了解一下
    2021-04-04
  • windows命令行中java和javac、javap使用详解(java编译命令)

    windows命令行中java和javac、javap使用详解(java编译命令)

    最近重新复习了一下java基础,这里便讲讲对于一个类文件如何编译、运行、反编译的。也让自己加深一下印象
    2014-03-03
  • JPA中@ElementCollection使用示例详解

    JPA中@ElementCollection使用示例详解

    在JPA中,@ElementCollection注解主要用于映射集合属性,例如List、Set或数组等集合属性,以及Map结构的集合属性,每个属性值都有对应的key映射,这篇文章主要介绍了JPA中@ElementCollection使用,需要的朋友可以参考下
    2023-11-11
  • SpringBoot Admin集成诊断利器Arthas示例实现

    SpringBoot Admin集成诊断利器Arthas示例实现

    这篇文章主要为大家介绍了SpringBoot Admin集成诊断利器Arthas示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 你真的了解java单例模式了吗?

    你真的了解java单例模式了吗?

    这篇文章主要介绍了你真的了解java单例模式了吗?实际上单例模式有着好几个变种,并且多线程中涉及到线程安全问题,,需要的朋友可以参考下
    2019-06-06
  • Spring的两种事务管理机制的基本概念和demo示例

    Spring的两种事务管理机制的基本概念和demo示例

    Spring事务包括声明式事务管理和注解式事务管理,我们通过概念和小demo的形式一步一步地来一起学习这个知识点,需要的朋友可以参考下
    2023-07-07
  • 新版POI获取日期类型cell值过程图解

    新版POI获取日期类型cell值过程图解

    这篇文章主要介绍了新版POI获取日期类型cell值过程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • 深入分析JAVA Synchronized关键字

    深入分析JAVA Synchronized关键字

    这篇文章主要介绍了析JAVA Synchronized关键字的相关知识,文中代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-06-06
  • 基于solr全文检索实现原理(详谈)

    基于solr全文检索实现原理(详谈)

    下面小编就为大家分享一篇基于solr全文检索实现原理详谈,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11

最新评论