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读取XML文件数据并显示的实现代码
Dec 16 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
axios post提交formdata的实例
Mar 16 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 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/01/17 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
django连接oracle时setting 配置方法
2019/08/29 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
大学在校生求职信范文
2013/11/21 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
党员公开承诺书
2014/03/25 职场文书
采购意向书范本
2014/03/31 职场文书
技校毕业生自荐书
2014/05/23 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
宾馆安全管理制度
2015/08/06 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书