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 EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
js实现进度条的方法
Feb 13 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
详解javascript函数的参数
Nov 10 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
element跨分页操作选择详解
Jun 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
星际玩家的三大定律
2020/03/04 星际争霸
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
setTimeout学习小结
2017/02/08 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
python实现图片批量剪切示例
2014/03/25 Python
Python中Class类用法实例分析
2015/11/12 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
如何通过python画loss曲线的方法
2019/06/26 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
人力资源作业细则
2014/03/03 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android