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 二分法(数组array)
Apr 24 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
JavaScript实现网页计算器功能
Oct 29 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实现的在线人员函数库
2008/04/09 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
理解javascript封装
2016/02/23 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
总结Python中逻辑运算符的使用
2015/05/13 Python
Python smallseg分词用法实例分析
2015/05/28 Python
Python中Class类用法实例分析
2015/11/12 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
采购内勤岗位职责
2013/12/10 职场文书
员工年终演讲稿
2014/01/03 职场文书
母婴店促销方案
2014/03/05 职场文书
推广活动策划方案
2014/08/23 职场文书
个人总结怎么写
2015/02/26 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
2015年妇女工作总结
2015/05/14 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python