基于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 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
JS解析XML实例分析
Jan 30 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 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/09 PHP
十大使用PHP框架的理由
2015/09/26 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
农历与西历对照
2006/09/06 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
js图片处理示例代码
2014/05/12 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
Python中__name__的使用实例
2015/04/14 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
Python高斯消除矩阵
2019/01/02 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
纽约海:Sea New York
2018/11/04 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
毕业生求职自荐信怎么写
2014/01/08 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
毕业酒会致辞
2015/07/29 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript