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 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
Javascript之datagrid查询详解
Sep 15 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
YB217、YB235、YB400浅听
2021/03/02 无线电
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
php实现加减法验证码代码
2014/02/14 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
玩转python爬虫之正则表达式
2016/02/17 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
Python3匿名函数用法示例
2018/07/25 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
使用python实现飞机大战游戏
2020/03/23 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
早餐连锁店计划书
2014/01/08 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫