基于JS设计12306登录页面
更新时间：2016年12月28日 11:04:43 投稿：mrr
本文给大家分享一段js代码实现12306登录界面，非常不错，具有参考借鉴价值，需要的朋友参考下
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<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>
好了，代码到此结束，希望对大家有所帮助！
相关文章
ThinkJS 是一款面向未来开发的 Node.js 框架，整合了大量的项目最佳实践，让企业级开发变得如此简单、高效。接下来通过本文给大家分享thinkjs 文件上传功能，需要的朋友参考下吧2017-11-11
这篇文章主要介绍了js实现简单折叠、展开菜单的方法,涉及javascript动态操作页面元素变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了js实现图片和链接文字同步切换特效的方法,涉及javascript操作文字及图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
微信小程序bindinput与bindsubmit的区别实例分析
这篇文章主要介绍了微信小程序bindinput与bindsubmit的区别,结合实例形式分析了微信小程序bindinput与bindsubmit的具体功能、用法及相关使用区别,需要的朋友可以参考下2019-04-04
随着移动互联网的不断普及，企业的网络宣传不仅只局限在PC端，还要在移动端发展。我们在自己的网站做了WAP手机完整之后，如果有用户通过手机访问我们的企业顶级域名网站，就要判断跳转到专为的WAP网站，下面小编给大家整理有关手机浏览器跳转WAP手机网站的相关内容2015-08-08
class尽管只算是一个语法糖,但它却是语言规范方面的一大成就,也对之前的继承进行了一定的增强,下面这篇文章主要给大家介绍了关于JavaScript面向对象之深入了解ES6的class的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了Bootstrap组件系列之福利篇几款好用的组件(推荐) 的相关资料,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了微信小程序购物商城系统开发系列-目录结构介绍，有兴趣的可以了解一下。2016-11-11
某些正则表达式模式可能容易受到回溯的影响,这可能会导致超线性运行时,并可能导致DoS攻击,本文就来介绍一下如何防止JavaScript中的正则表达式回溯,感兴趣的可以了解一下2023-08-08
js验证表单大全...2006-11-11
最新评论