基于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 相关文章推荐
js 获取input点选按钮的值的方法
Apr 14 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
VUE路由动态加载实例代码讲解
Aug 26 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
JS数组的常用10种方法详解
May 08 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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中删除变量时unset()和null的区别分析
2011/01/27 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python兔子毒药问题实例分析
2015/03/05 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python3爬虫怎样构建请求header
2018/12/23 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
微信小程序python用户认证的实现
2019/07/29 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
详解Python中的路径问题
2020/09/02 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
大专生自我评价
2014/01/28 职场文书
公司业务员岗位职责
2014/03/18 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
SpringBoot整合Minio文件存储
2022/04/03 Java/Android