JS簡(jiǎn)單實(shí)現(xiàn)登陸驗(yàn)證附效果圖
更新時(shí)間：2013年11月19日 16:21:43 作者：
實(shí)現(xiàn)登陸驗(yàn)證的方法有很多，在本文為大家詳細(xì)介紹下使用js是如何做到的，下面有個(gè)不錯(cuò)的示例還有運(yùn)行截圖，喜歡的朋友可以嘗試操作下
源代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Author" content="劉江波">
<script type="text/javascript">
function login(){
var userName=document.getElementById("userName").value;
var pwd=document.getElementById("pwd").value;
var repwd=document.getElementById("repwd").value;
var address=document.getElementById("address").value;
var matchResult=true;
if(userName==""||pwd==""||repwd==""||address==""){
alert("請(qǐng)確認(rèn)是否有空缺項(xiàng)！");
matchResult=false;
}else if(userName.length<6||userName.length>20){
alert("用戶名長(zhǎng)度應(yīng)在6到20個(gè)字符之間！");
matchResult=false;
}else if(userName==pwd||userName==repwd){
alert("密碼或重復(fù)密碼不能和用戶名相同！");
matchResult=false;
}else if(pwd.length<6||pwd.length>20||repwd.length<6||repwd.length>20){
alert("密碼或重復(fù)密碼長(zhǎng)度應(yīng)在6到20個(gè)字符之間！");
matchResult=false;
}else if(pwd!=repwd){
alert("密碼和重復(fù)密碼不同，請(qǐng)重新輸入！");
matchResult=false;
}else if(userName.length<6||userName.length>20){
alert("用戶名長(zhǎng)度應(yīng)在6到20個(gè)字符之間！");
matchResult=false;
}
if(matchResult==true){
var mailreg = /^\w+@\w+(\.\w+)+$/;
if(!address.match(mailreg)){
alert("郵箱格式不正確");
matchResult=false;
}
}
if(matchResult==true){
if(userName.charAt(0)>=0&&userName.charAt(0)<=9){
alert("用戶名不能以數(shù)字字符開(kāi)始！");
matchResult=false;
}
}
return matchResult;
}
</script>
<title>用戶注冊(cè)及驗(yàn)證</title>
</head>
<body>
<center>
<form name="loginForm" action="http://www.ytu.edu.cn" onsubmit="return login()" method="post">
<table bgcolor="#6666FF" width="300" cellspacing="0" cellpadding="0" border="0" align="left" valign="top">
<tr>
<td class="table-title" colspan="2" align="center" bgcolor="#3366FF">用戶注冊(cè)</td>
</tr>
<tr>
<td width="130" height="28" align="left">登錄用戶名</td>
<td><input id="userName" name="userName" type="text" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">登錄密碼</td>
<td><input id="pwd" name="pwd" type="password" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">重復(fù)輸入密碼</td>
<td><input id="repwd" name="repwd" type="password" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">有效郵箱地址</td>
<td><input id="address" name="address" type="text" class="input"></td>
</tr>
<tr>
<!--<td width="10" height="28" align="left"></td>-->
<td colspan="2">
<input type="submit" value="登錄">
<input type="button" value="取消" onClick="reset()"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
效果實(shí)現(xiàn)：
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Author" content="劉江波">
<script type="text/javascript">
function login(){
var userName=document.getElementById("userName").value;
var pwd=document.getElementById("pwd").value;
var repwd=document.getElementById("repwd").value;
var address=document.getElementById("address").value;
var matchResult=true;
if(userName==""||pwd==""||repwd==""||address==""){
alert("請(qǐng)確認(rèn)是否有空缺項(xiàng)！");
matchResult=false;
}else if(userName.length<6||userName.length>20){
alert("用戶名長(zhǎng)度應(yīng)在6到20個(gè)字符之間！");
matchResult=false;
}else if(userName==pwd||userName==repwd){
alert("密碼或重復(fù)密碼不能和用戶名相同！");
matchResult=false;
}else if(pwd.length<6||pwd.length>20||repwd.length<6||repwd.length>20){
alert("密碼或重復(fù)密碼長(zhǎng)度應(yīng)在6到20個(gè)字符之間！");
matchResult=false;
}else if(pwd!=repwd){
alert("密碼和重復(fù)密碼不同，請(qǐng)重新輸入！");
matchResult=false;
}else if(userName.length<6||userName.length>20){
alert("用戶名長(zhǎng)度應(yīng)在6到20個(gè)字符之間！");
matchResult=false;
}
if(matchResult==true){
var mailreg = /^\w+@\w+(\.\w+)+$/;
if(!address.match(mailreg)){
alert("郵箱格式不正確");
matchResult=false;
}
}
if(matchResult==true){
if(userName.charAt(0)>=0&&userName.charAt(0)<=9){
alert("用戶名不能以數(shù)字字符開(kāi)始！");
matchResult=false;
}
}
return matchResult;
}
</script>
<title>用戶注冊(cè)及驗(yàn)證</title>
</head>
<body>
<center>
<form name="loginForm" action="http://www.ytu.edu.cn" onsubmit="return login()" method="post">
<table bgcolor="#6666FF" width="300" cellspacing="0" cellpadding="0" border="0" align="left" valign="top">
<tr>
<td class="table-title" colspan="2" align="center" bgcolor="#3366FF">用戶注冊(cè)</td>
</tr>
<tr>
<td width="130" height="28" align="left">登錄用戶名</td>
<td><input id="userName" name="userName" type="text" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">登錄密碼</td>
<td><input id="pwd" name="pwd" type="password" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">重復(fù)輸入密碼</td>
<td><input id="repwd" name="repwd" type="password" class="input"></td>
</tr>
<tr>
<td width="80" height="28" align="left">有效郵箱地址</td>
<td><input id="address" name="address" type="text" class="input"></td>
</tr>
<tr>
<!--<td width="10" height="28" align="left"></td>-->
<td colspan="2">
<input type="submit" value="登錄">
<input type="button" value="取消" onClick="reset()"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
效果實(shí)現(xiàn)：
您可能感興趣的文章:
- jquery實(shí)現(xiàn)界面無(wú)刷新加載登陸注冊(cè)
- struts2+jquery實(shí)現(xiàn)ajax登陸實(shí)例詳解
- jQuery的cookie插件實(shí)現(xiàn)保存用戶登陸信息
- 使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
- jQuery登陸判斷簡(jiǎn)單實(shí)現(xiàn)代碼
- 將jQuery應(yīng)用于login頁(yè)面的問(wèn)題及解決
- Jsp中解決session過(guò)期跳轉(zhuǎn)到登陸頁(yè)面并跳出iframe框架的方法
- httpclient模擬登陸具體實(shí)現(xiàn)(使用js設(shè)置cookie)
- ExtJs 表單提交登陸實(shí)現(xiàn)代碼
- jQuery+Pdo編寫(xiě)login登陸界面
相關(guān)文章
JavaScript基礎(chǔ)知識(shí)之?dāng)?shù)據(jù)類型
JavaScript中有5種簡(jiǎn)單數(shù)據(jù)類型（也稱為基本數(shù)據(jù)類型）：Undefined、Null、Boolean、Number和String。還有1種復(fù)雜數(shù)據(jù)類型——Object，Object本質(zhì)上是由一組無(wú)序的名值對(duì)組成的2012-08-08
原生js實(shí)現(xiàn)節(jié)日時(shí)間倒計(jì)時(shí)功能
本文主要分享了原生js實(shí)現(xiàn)節(jié)日時(shí)間倒計(jì)時(shí)功能的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
ECMAScript 6.0（以下簡(jiǎn)稱 ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)是使得JavaScript語(yǔ)言可以用來(lái)編寫(xiě)復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。2022-04-04
深入理解JavaScript中的對(duì)象復(fù)制(Object Clone)
下面小編就為大家?guī)?lái)一篇深入理解JavaScript中的對(duì)象復(fù)制(Object Clone)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
解決 firefox 不支持 document.all的方法
解決 firefox 不支持 document.all的方法...2007-03-03
上面描述了數(shù)據(jù)類型,學(xué)習(xí)完數(shù)據(jù)類型就不得不提到變量。2010-12-12
JavaScript學(xué)習(xí)筆記之JS對(duì)象
這篇文章向我們?cè)敿?xì)介紹了javascript中的對(duì)象，包括默認(rèn)對(duì)象、數(shù)組對(duì)象、字符串對(duì)象、自定義對(duì)象，并通過(guò)示例對(duì)這4中對(duì)象做了對(duì)比分析，推薦給大家。2015-01-01
你需要一個(gè)防止錯(cuò)誤產(chǎn)生的機(jī)器，可以理解CSS并且理解你:你的意圖、喜好、主意以及弱點(diǎn)。 只要是它可以阻止的錯(cuò)誤它都會(huì)持續(xù)阻止。同時(shí)，你和你的同事可以一直改善機(jī)器，擴(kuò)展它的功能并且削弱其局限性。2016-04-04
javascript中數(shù)組的多種定義方法和常用函數(shù)簡(jiǎn)介
本文簡(jiǎn)單介紹了javascript一維數(shù)組和二維數(shù)組的定義方法集錦以及常用函數(shù)簡(jiǎn)介。2014-05-05
JavaScript 遞增、遞減運(yùn)算符實(shí)例
遞增、遞減運(yùn)算符實(shí)例，基礎(chǔ)Js代碼范例，新手可參考哦。2010-07-07