基于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 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
js实现网页定位导航功能
Mar 07 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
ES11屡试不爽的新特性,你用上了几个
Oct 21 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
为什么相对PHP黑python的更少
2020/06/21 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
法律专业推荐信范文
2013/11/29 职场文书
银行实习生的自我评价
2013/12/09 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
数控机床专业自荐信
2014/05/19 职场文书
2014公司年终工作总结
2014/12/19 职场文书
债务追讨律师函
2015/06/24 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle