基于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 相关文章推荐
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
原生JS实现层叠轮播图
May 17 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
JS动态图片的实现方法完整示例
Jan 13 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
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Python类及获取对象属性方法解析
2020/06/15 Python
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
大专生工程监理求职信
2013/10/04 职场文书
检察官就职演讲稿
2014/01/13 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
教师个人师德总结
2015/02/06 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python