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门道之标准库
标准库指的是js的标准内置对象，是js这门语言本身初始时提供的在全局范围的对象,需要的朋友可以参考下
2018-05-05
js切换div css注意的细节
有些朋友在做div css js切换时,会碰到很多的问题，于是搜集整理了一下，拿出来和大家分享，希望可以帮助你们
2012-12-12
JavaScript学习历程和心得小结
在过去，JavaScript只是被用来做一些简单的网页效果，比如表单验证、浮动广告等，所以那时候JavaScript并没有受到重视。
2010-08-08
JS简单实现登陆验证附效果图
实现登陆验证的方法有很多，在本文为大家详细介绍下使用js是如何做到的，下面有个不错的示例还有运行截图，喜欢的朋友可以尝试操作下
2013-11-11
JavaScript的Date()方法使用详解
这篇文章主要介绍了JavaScript的Date()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06
JavaScript脚本语言在网页中的简单应用
JavaScript脚本语言在网页中的简单应用...
2007-05-05
JavaScript中constructor()方法的使用简介
这篇文章主要介绍了JavaScript中constructor()方法的使用简介,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06
JavaScript 学习笔记 Black.Caffeine 09.11.28
这两天终于写出了一个个人认为真正意义上的作业了，不过，最大感受就是。。。IE太垃圾了。。。so，这个作业实际上也没有完成的很完美，因为，在IE上还是有兼容性的问题存在，不错，就此先自我总结一下吧~免得以后又忘了~
2009-11-11
深入理解JavaScript 函数
下面小编就为大家带来一篇深入理解JavaScript 函数。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
ES6基础语法之对象介绍
这篇文章介绍了ES6中对象的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05