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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
js使用ajax读博客rss示例
May 06 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
vue实现留言板todolist功能
Aug 16 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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
Linux下编译redis和phpredis的方法
2016/04/07 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python批量转换文件编码格式
2015/05/17 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
机电工程专业应届生求职信
2013/10/03 职场文书
应急处置方案
2014/06/16 职场文书
党性心得体会
2014/09/03 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
安全责任书
2015/01/29 职场文书
订货会邀请函
2015/01/31 职场文书
2015年端午节活动总结
2015/02/11 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
靠谱的活动总结
2019/04/16 职场文书
学习计划是什么
2019/04/30 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
教你怎么用Python生成九宫格照片
2021/05/20 Python