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 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
javascript搜索框效果实现方法
May 14 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 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
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php单例模式的简单实现方法
2016/06/10 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
Smarty模板语法详解
2019/07/20 PHP
一个JS翻页效果
2007/07/23 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
python3读取csv和xlsx文件的实例
2018/06/22 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
2014年五四青年节活动方案
2014/03/29 职场文书
高中生操行评语大全
2014/04/25 职场文书
个人委托书怎么写
2014/09/17 职场文书
出差报告范文
2014/11/06 职场文书
民主生活会汇报材料
2014/12/15 职场文书
意向协议书
2015/01/27 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL