基于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 放大镜 移动镜片效果代码
May 09 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
微信小程序实现登录注册功能
Dec 29 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/05/10 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
最大K个数问题的Python版解法总结
2016/06/16 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python中的枚举类型示例介绍
2019/01/09 Python
python抖音表白程序源代码
2019/04/07 Python
python中调试或排错的五种方法示例
2019/09/12 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
机电专业个人自荐信格式模板
2013/09/23 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
爱与责任演讲稿
2014/05/20 职场文书
国际会计专业求职信
2014/08/04 职场文书
律师授权委托书范本
2014/10/07 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
医院员工辞职信范文
2015/05/12 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS