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 处理 URL 的两个函数代码
Aug 13 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
php+js实现倒计时功能
Jun 02 Javascript
使用angular写一个hello world
Jan 23 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
Vue基础配置讲解
Nov 29 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
vue v-model的用法解析
Oct 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
PHP中读取照片exif信息的方法
2014/08/20 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
python第三方库学习笔记
2020/02/07 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
python文件路径操作方法总结
2020/12/21 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
python 递归相关知识总结
2021/03/03 Python
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
园林毕业生自我鉴定范文
2013/12/29 职场文书
服装创业计划书范文
2014/02/05 职场文书
授权委托书范本
2014/04/03 职场文书
财务工作失职检讨书
2014/11/21 职场文书
个人总结与自我评价
2015/02/14 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
原生JS实现分页
2022/04/19 Javascript
移除Selenium中window.navigator.webdriver值
2022/06/10 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技