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获取form表单值的代码
Jul 17 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
Vue父子传递实例讲解
Feb 14 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数组中的重复值的实现代码
2011/07/17 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Python检测数据类型的方法总结
2019/05/20 Python
python解析xml简单示例
2019/06/21 Python
Python3 集合set入门基础
2020/02/10 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
优秀学生干部推荐材料
2014/02/03 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
运动会入场词50字
2014/02/20 职场文书
上班离岗检讨书
2014/09/10 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
食品药品安全责任书
2015/05/11 职场文书
法律意见书范本
2015/06/04 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android