快捷導(dǎo)航

基于JS設(shè)計(jì)12306登錄頁面

更新時(shí)間：2016年12月28日 11:04:43 投稿：mrr

本文給大家分享一段js代碼實(shí)現(xiàn)12306登錄界面，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下

廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：

<html> 
<head> 
<script> 
function f_validate() 
{  
var username=document.getElementById("uname").value; 
var passwd=document.getElementById("passwd").value; 
var yzm=document.getElementById("yzm").value; 
// var username=document.getElementsByName("uname")[0].value; 
// var passwd=document.getElementsByName("passwd")[0].value; 
var error=""; 
if(username==""|| username==null ||username=="請(qǐng)輸入") 
{ 
// alert("用戶名不能為空！"); 
error=error+"用戶名不能為空！"; 
error=error+"\n"; 
//return false; 
}else if(username.length<6){ 
 //alert("您的用戶名長(zhǎng)度小于6！"); 
 error=error+"您的用戶名長(zhǎng)度小于6！"; 
error=error+"\n"; 
 //return false 
}else if(username.length>12){ 
 //alert("您的用戶名長(zhǎng)度大于12！"); 
 error=error+"您的用戶名長(zhǎng)度大于12！"; 
error=error+"\n"; 
// return false 
} 
if(passwd==""|| passwd==null) 
{ 
// alert("密碼不能為空！"); 
error=error+"密碼不能為空！"; 
error=error+"\n"; 
//return false; 
}else if(passwd.length<6){ 
 // alert("您的密碼長(zhǎng)度小于6！"); 
 error=error+"您的密碼長(zhǎng)度小于6！"; 
error=error+"\n"; 
//return false 
}else if(passwd.length>12){ 
 // alert("您的密碼長(zhǎng)度大于12！"); 
 error=error+"您的密碼長(zhǎng)度大于12！"; 
// return false 
} 
if(yzm==""||yzm==null) 
{ 
// alert("密碼不能為空！"); 
error=error+"驗(yàn)證碼不能為空！"; 
error=error+"\n"; 
//return false; 
} 
if(error=="") 
{ 
//window.location.href="h.html"; 
return true; 
}else 
{ 
alert(error); 
return false; 
} 
} 
function setInfo(){ 
var username=document.getElementById("uname"); 
if(username.value==""||username.value==null) 
username.value="請(qǐng)輸入"; 
} 
function clearInfo() 
{ 
var username=document.getElementById("uname").value=""; 
} 
</script> 
</head> 
<body onload="setInfo()"> 
<form action="http://localhost:8080/test/main/whole.html" method="post" onSubmit="return f_validate()"> 
<center> 
<table background="images\bg_img1.jpg" width="945" height="433"> 
<tr height="25"> 
<td width="570px"> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td><table cellpadding="5"> 
<tr><td>用戶名:</td><td colspan="3"><input type="text"name="username" id="uname" value="" onfocus="clearInfo()" onblur="setInfo()"></td> 
</tr> 
<tr><td>密 碼:</td><td colspan="3"><input type="password" id="passwd"> 
</td></tr> 
<tr><td >驗(yàn)證碼:</td><td><input type="text" id="yzm"></td><td><img src=".\images\bg_img2.gif" alt="打不開圖片"></td><td><a href='#' onclick="shuaxin()">刷新</a> 
</td></tr> 
<tr><td><input type="checkbox" name="ck" value="1"></td><td colspan="2">自動(dòng)登錄</td> 
</tr> 
<tr><table cellspacing="30"> 
<td ><input type="submit" name="login" value="登錄" onclick="f_validate()"></td> 
<td><input type="reset" name="rs" value="重置"></td> 
<td><input type="button" name="zc" value="注冊(cè)" onclick="location.href='http://localhost:8080/test/lg.html'"></td> 
</table></tr> 
</table> 
</td> 
</tr> 
</center> 
</table> 
</form> 
</body> 
</html>

好了，代碼到此結(jié)束，希望對(duì)大家有所幫助！

您可能感興趣的文章: