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得到font-size属性值实现代码
Sep 30 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
详解angular应用容器化部署
Aug 14 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
vue el-table实现行内编辑功能
Dec 11 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中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
Python编程之event对象的用法实例分析
2017/03/23 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python爬虫之遍历单个域名
2019/11/20 Python
Python能做什么
2020/06/02 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
高三体育教学反思
2014/01/29 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
高校教师自荐信范文
2014/03/13 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
工伤私了协议书范本
2014/11/24 职场文书
教师先进个人材料
2014/12/17 职场文书
团代会邀请函
2015/02/02 职场文书
公务员年终个人总结
2015/02/12 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书