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 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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验证码类(分享)
2013/08/06 PHP
自动最大化窗口的Javascript代码
2013/05/22 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
js使用highlight.js高亮你的代码
2017/08/18 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
Python中的下划线详解
2015/06/24 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
python实现贪吃蛇小游戏
2020/03/21 Python
树莓派升级python的具体步骤
2020/07/05 Python
python如何操作mysql
2020/08/17 Python
Python远程linux执行命令实现
2020/11/11 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
护理专业学生职业生涯规划范文
2014/03/11 职场文书
法人代表授权委托书
2014/04/08 职场文书
企业标语大全
2014/07/01 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
公证处委托书
2015/01/28 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers