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


Posted in Javascript onNovember 19, 2013

源代码:

<!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>

效果实现:
JS简单实现登陆验证附效果图
Javascript 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
js模块加载方式浅析
Aug 12 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
JS中min函数实例讲解
Feb 18 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
JS随机漂浮广告代码具体实例
Nov 19 #Javascript
JS简单实现元素复制示例附图
Nov 19 #Javascript
js获取当月最后一天实例代码
Nov 19 #Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 #Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 #Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 #Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 #Javascript
You might like
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
javascript常见用法总结
2014/05/22 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python IDLE入门简介
2017/12/08 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
pandas通过loc生成新的列方法
2018/11/28 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
财务管理专业推荐信
2013/11/19 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
商业项目策划方案
2014/06/05 职场文书
中学总务处工作总结
2015/08/12 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server