基于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 29 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
jquery实现显示已选用户
Jul 21 Javascript
js密码强度实时检测代码
Mar 02 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
node.js中cluster的使用教程
Jun 09 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
微信小程序block的使用教程
Apr 01 Javascript
Javascript实现关闭广告效果
Jan 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
重置版游戏视频
2020/04/09 魔兽争霸
php sybase_fetch_array使用方法
2014/04/15 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
javascript globalStorage类代码
2009/06/04 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
vue实现文字加密功能
2019/09/27 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
Python实现Linux的find命令实例分享
2017/06/04 Python
基于python指定包的安装路径方法
2018/10/27 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
一组SQL面试题
2016/02/15 面试题
毕业生护理专业个人求职信范文
2014/01/04 职场文书
运输服务质量承诺书
2014/03/27 职场文书
购房意向书范本
2014/04/01 职场文书
房屋委托书范本
2014/04/04 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
感恩教师主题班会
2015/08/12 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python