基于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的树控件实现代码(asp.net+json)
Jul 11 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php木马webshell扫描器代码
2012/01/25 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
php格式文件打开的四种方法
2018/02/24 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
原生js实现网易轮播图效果
2020/04/10 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
Python实现类继承实例
2014/07/04 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Python subprocess模块详细解读
2018/01/29 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python分数表示方式和写法
2019/06/26 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
高中教师考核方案
2014/05/18 职场文书
户外宣传策划方案
2014/05/25 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
python如何读取.mtx文件
2021/04/22 Python
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
Java中的Kotlin 内部类原理
2022/06/16 Java/Android