基于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 相关文章推荐
jQuery的运行机制和设计理念分析
Apr 05 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
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使用array_fill定义多维数组的方法
2015/03/18 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
Jquery ui css framework
2010/06/28 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
python如何读写json数据
2018/03/21 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
python如何查看网页代码
2020/06/07 Python
学python需要去培训机构吗
2020/07/01 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
耐克亚太地区:Nike APAC
2019/12/07 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
2014年党员公开承诺践诺书
2014/03/25 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
文明班级申报材料
2014/12/24 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
走近毛泽东观后感
2015/06/04 职场文书
文化大革命观后感
2015/06/17 职场文书
考研经验交流会策划书
2015/11/02 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书