JS简单实现登陆验证附效果图

更新时间：2013年11月19日 16:21:43 作者：

实现登陆验证的方法有很多，在本文为大家详细介绍下使用js是如何做到的，下面有个不错的示例还有运行截图，喜欢的朋友可以尝试操作下

源代码：

 
<!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("请确认是否有空缺项！"); 
matchResult=false; 
}else if(userName.length<6||userName.length>20){ 
alert("用户名长度应在6到20个字符之间！"); 
matchResult=false; 
}else if(userName==pwd||userName==repwd){ 
alert("密码或重复密码不能和用户名相同！"); 
matchResult=false; 
}else if(pwd.length<6||pwd.length>20||repwd.length<6||repwd.length>20){ 
alert("密码或重复密码长度应在6到20个字符之间！"); 
matchResult=false; 
}else if(pwd!=repwd){ 
alert("密码和重复密码不同，请重新输入！"); 
matchResult=false; 
}else if(userName.length<6||userName.length>20){ 
alert("用户名长度应在6到20个字符之间！"); 
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("用户名不能以数字字符开始！"); 
matchResult=false; 
} 
} 

return matchResult; 
} 
</script> 
<title>用户注册及验证</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">用户注册</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">重复输入密码</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> 

效果实现：

您可能感兴趣的文章:

JavaScript基础知识之数据类型
JavaScript中有5种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object，Object本质上是由一组无序的名值对组成的
2012-08-08
原生js实现节日时间倒计时功能
本文主要分享了原生js实现节日时间倒计时功能的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
ES6基础知识介绍
ECMAScript 6.0（以下简称 ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
2022-04-04
深入理解JavaScript中的对象复制(Object Clone)
下面小编就为大家带来一篇深入理解JavaScript中的对象复制(Object Clone)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
解决 firefox 不支持 document.all的方法
解决 firefox 不支持 document.all的方法...
2007-03-03
Javascript学习笔记二之变量
上面描述了数据类型,学习完数据类型就不得不提到变量。
2010-12-12
JavaScript学习笔记之JS对象
这篇文章向我们详细介绍了javascript中的对象，包括默认对象、数组对象、字符串对象、自定义对象，并通过示例对这4中对象做了对比分析，推荐给大家。
2015-01-01
使用 stylelint检查CSS_StyleLint
你需要一个防止错误产生的机器，可以理解CSS并且理解你:你的意图、喜好、主意以及弱点。只要是它可以阻止的错误它都会持续阻止。同时，你和你的同事可以一直改善机器，扩展它的功能并且削弱其局限性。
2016-04-04
javascript中数组的多种定义方法和常用函数简介
本文简单介绍了javascript一维数组和二维数组的定义方法集锦以及常用函数简介。
2014-05-05
JavaScript 递增、递减运算符实例
递增、递减运算符实例，基础Js代码范例，新手可参考哦。
2010-07-07