基于JS设计12306登录页面


Posted in Javascript onDecember 28, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<html> 
<head> 
<script> 
function f_validate() 
{  
var username=document.getElementById("uname").value; 
var passwd=document.getElementById("passwd").value; 
var yzm=document.getElementById("yzm").value; 
// var username=document.getElementsByName("uname")[0].value; 
// var passwd=document.getElementsByName("passwd")[0].value; 
var error=""; 
if(username==""|| username==null ||username=="请输入") 
{ 
// alert("用户名不能为空!"); 
error=error+"用户名不能为空!"; 
error=error+"\n"; 
//return false; 
}else if(username.length<6){ 
 //alert("您的用户名长度小于6!"); 
 error=error+"您的用户名长度小于6!"; 
error=error+"\n"; 
 //return false 
}else if(username.length>12){ 
 //alert("您的用户名长度大于12!"); 
 error=error+"您的用户名长度大于12!"; 
error=error+"\n"; 
// return false 
} 
if(passwd==""|| passwd==null) 
{ 
// alert("密码不能为空!"); 
error=error+"密码不能为空!"; 
error=error+"\n"; 
//return false; 
}else if(passwd.length<6){ 
 // alert("您的密码长度小于6!"); 
 error=error+"您的密码长度小于6!"; 
error=error+"\n"; 
//return false 
}else if(passwd.length>12){ 
 // alert("您的密码长度大于12!"); 
 error=error+"您的密码长度大于12!"; 
// return false 
} 
if(yzm==""||yzm==null) 
{ 
// alert("密码不能为空!"); 
error=error+"验证码不能为空!"; 
error=error+"\n"; 
//return false; 
} 
if(error=="") 
{ 
//window.location.href="h.html"; 
return true; 
}else 
{ 
alert(error); 
return false; 
} 
} 
function setInfo(){ 
var username=document.getElementById("uname"); 
if(username.value==""||username.value==null) 
username.value="请输入"; 
} 
function clearInfo() 
{ 
var username=document.getElementById("uname").value=""; 
} 
</script> 
</head> 
<body onload="setInfo()"> 
<form action="http://localhost:8080/test/main/whole.html" method="post" onSubmit="return f_validate()"> 
<center> 
<table background="images\bg_img1.jpg" width="945" height="433"> 
<tr height="25"> 
<td width="570px"> </td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td><table cellpadding="5"> 
<tr><td>用户名:</td><td colspan="3"><input type="text"name="username" id="uname" value="" onfocus="clearInfo()" onblur="setInfo()"></td> 
</tr> 
<tr><td>密 码:</td><td colspan="3"><input type="password" id="passwd"> 
</td></tr> 
<tr><td >验证码:</td><td><input type="text" id="yzm"></td><td><img src=".\images\bg_img2.gif" alt="打不开图片"></td><td><a href='#' onclick="shuaxin()">刷新</a> 
</td></tr> 
<tr><td><input type="checkbox" name="ck" value="1"></td><td colspan="2">自动登录</td> 
</tr> 
<tr><table cellspacing="30"> 
<td ><input type="submit" name="login" value="登录" onclick="f_validate()"></td> 
<td><input type="reset" name="rs" value="重置"></td> 
<td><input type="button" name="zc" value="注册" onclick="location.href='http://localhost:8080/test/lg.html'"></td> 
</table></tr> 
</table> 
</td> 
</tr> 
</center> 
</table> 
</form> 
</body> 
</html>

好了,代码到此结束,希望对大家有所帮助!

Javascript 相关文章推荐
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
JS实现搜索框文字可删除功能
Dec 28 #Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 #Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 #Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 #Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 #Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 #Javascript
AngularJS实现网站换肤实例
Feb 19 #Javascript
You might like
主流PHP框架的优缺点对比分析
2014/12/25 PHP
php 多文件上传的实现实例
2016/10/23 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
优秀中专生推荐信
2013/11/17 职场文书
给校长的建议书600字
2014/05/15 职场文书
售后服务承诺书模板
2014/05/21 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python