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得到网页中所有的div的id
Oct 19 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
js实现选项卡效果
Mar 07 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
Python全局变量操作详解
2015/04/14 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
python interpolate插值实例
2020/07/06 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
超市5.1促销活动
2014/01/15 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
欢迎领导标语
2014/06/27 职场文书
家庭贫困证明
2014/09/23 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
联谊活动总结范文
2015/05/09 职场文书
2015双创工作总结
2015/07/24 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
基于Python编写一个监控CPU的应用系统
2022/06/25 Python