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 TextBox自动完成条
Jul 22 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
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
基于mysql的论坛(5)
2006/10/09 PHP
php xfocus防注入资料
2008/04/27 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
Prototype的Class.create函数解析
2011/09/22 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
Vue 组件间的样式冲突污染
2017/08/31 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
python 使用get_argument获取url query参数
2017/04/28 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python之拟合的实现
2019/07/19 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
谈谈python垃圾回收机制
2020/09/27 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
简单介绍Object类的功能、常用方法
2013/10/02 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
高三体育教学反思
2014/01/29 职场文书
党员十八大心得体会
2014/09/12 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
导游词之南京中山陵
2019/11/27 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
详解MySQL中的pid与socket
2021/06/15 MySQL
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis