基于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 操作cookies及正确使用cookies的属性
Oct 15 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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制作图型计数器的例子
2006/10/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
destoon二次开发入门示例
2014/06/20 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
园林设计师自荐信
2013/11/18 职场文书
向领导表决心的话
2014/03/11 职场文书
医学专业自荐信
2014/06/14 职场文书
校园广播稿精选
2014/10/01 职场文书
2014年共青团工作总结
2014/12/10 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书