Java Web 登錄頁面的實現(xiàn)代碼實例

更新時間：2019年03月25日 14:54:04 作者：如果東京不快樂

這篇文章主要介紹了Java Web 登錄頁面的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

代碼如下~

內(nèi)有詳細解釋，最后有照片！

<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="用戶名只能由中文、英文、數(shù)字及'_'、'-'組成";
			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 文本框 內(nèi)的文字顏色 
			f1.mail.style.color="red";
			//設置文本框顏色以及框的大小
			f1.mail.style.border="1px solid red";
			mail_ok.style.visibility="hidden";
		}
	}
</script>
 
<!-- 
以下為 class 標簽的 應用函數(shù)	+++
 -->
<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位字符，可由中文、英文、數(shù)字及"_"、"-"組成</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="">網(wǎng)易</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="同意以下協(xié)議，提交" tabindex="8"/>
		</form>
	</body>
</html>