基于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点击自以外任意处,关闭自身的代码
Feb 10 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
Vue模板语法中数据绑定的实例代码
May 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
大专生简历的自我评价
2013/11/26 职场文书
班主任工作年限证明
2014/01/12 职场文书
采购部经理岗位职责
2014/02/10 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android