基于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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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的ASP防火墙
2006/10/09 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
sina的lightbox效果。
2007/01/09 Javascript
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
python实现俄罗斯方块游戏
2020/03/25 Python
Python全栈之列表数据类型详解
2019/10/01 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
Java的五个基础面试题
2016/02/26 面试题
大学生毕业自我鉴定范文
2013/11/03 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
通知的格式范文
2015/04/27 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers