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

相关文章

  • java实现轻量型http代理服务器示例

    java实现轻量型http代理服务器示例

    这篇文章主要介绍了java实现轻量型http代理服务器示例,需要的朋友可以参考下
    2014-04-04
  • java文件操作代码片断实例实现文件中字母出现的个数功能

    java文件操作代码片断实例实现文件中字母出现的个数功能

    本文介绍java读文件实例,实现某一目录下每个文件中出现的字母个数、数字个数、空格个数及行数,除此之外没有其他字符,大家参考使用吧
    2014-01-01
  • Java中使用内存映射实现大文件上传实例

    Java中使用内存映射实现大文件上传实例

    这篇文章主要介绍了Java中使用内存映射实现大文件上传实例,本文对比测试了FileInputStream 或者FileOutputStream 抑或RandomAccessFile的频繁读写操作,最后总结出映射到内存后进行读写以提高速度,需要的朋友可以参考下
    2015-01-01
  • java 集合并发操作出现的异常ConcurrentModificationException

    java 集合并发操作出现的异常ConcurrentModificationException

    Map在遍历时候通常 现获得其键值的集合Set,然后用迭代器Iterator来对Map进行遍历。
    2009-06-06
  • Java读取.properties配置文件方法示例

    Java读取.properties配置文件方法示例

    这篇文章主要介绍了Java读取.properties配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Java8中字符串处理库strman-java的使用示例

    Java8中字符串处理库strman-java的使用示例

    除了Java本身的字符串处理方式外,我们还可以使用Apache Common Langs里的StringUtils来简化String的操作。但以上两种方式对于我们日常编程中最容易碰到的字符串处理来说,仍然显得有些不足。所以这篇文章给大家介绍Java8中字符串处理库strman-java的使用。
    2016-09-09
  • springboot 事件监听的实现方法

    springboot 事件监听的实现方法

    这篇文章主要介绍了springboot 事件监听的实现方法,并详细的介绍了四种监听方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • java字符串压缩解压示例

    java字符串压缩解压示例

    这篇文章主要介绍了java字符串压缩解压示例,先压缩,再加密,再压缩,数据越大,压缩比例越高,需要的朋友可以参考下
    2014-03-03
  • 详细解析Java中抽象类和接口的区别

    详细解析Java中抽象类和接口的区别

    这篇文章主要介绍了Java中抽象类和接口的区别详解,需要的朋友可以参考下
    2014-10-10
  • Java中的接口知识汇总

    Java中的接口知识汇总

    本文给大家汇总介绍了在java中的接口知识,包括为什么要使用接口、什么是接口、抽象类和接口的区别、如何定义接口以及定义接口注意点,希望大家能够喜欢
    2016-04-04

最新评论