基于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>

好了，代码到此结束，希望对大家有所帮助！

赞 (0)

相关推荐

  • JBuilder2005实战JSP之登录页面实现代码[图]

    JBuilder2005实战JSP之登录页面实现代码[图]

    通过File->New...->Web->双击JSP图标,弹出创建JSP向导的对话框,如下图所示: 图 3 通过向导创建login.jsp ·Web module:如果一个工程下有多个Web模块,你可以通过这儿指定JSP所要加入到的Web模块,因为我们的工程中只有一个webModule,所以是向导将默认设置为webModule. ·Name :键入JSP文件名,你可以键入.jsp后缀,也可以不写后缀,直接键入login就可以了. Generate sample bean选项勾选后JBui

  • 防止登录页面出现在frame中js代码

    在使用frame页面嵌套开发的时候,遇到重启了服务器的时候会出现登录页面在frame页面中出现, 所以需要在登录页面里面用js判断下当前的地址信息,然后跳转到登录的单独页面中. js代码如下: $("document").ready(function(){ //防止在frame里面出现登录页面 if(top.location!==self.location){ //alert(top.location); //alert(self.location); top.location.hre

  • 登录超时给出提示跳到登录页面（ajax、导入、导出）

    一.一般页面登录超时验证,可以用过滤器filter,如下: package com.lg.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequ

  • Ajax Session失效跳转登录页面的方法

    在Struts应用中,我们发出的请求都会经过 相应的拦截器进行相关处理,一般都会有一个用户登录拦截(Session失效拦截):一般请求的话,如果Session失效时,我们会跳到登录页面,可是如果我们采用AJAX请求时,将会返回登录页面的HTML代码,这肯定不是我们想要的,那么我们如何解决呢?请看以下步骤: 一.建立拦截器 package com.xxx.planeap.interceptor; import javax.servlet.http.HttpServletRequest; impor

  • JS实现登录页面记住密码和enter键登录方法推荐

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>按enter键触发事件和记住账号密码</title> <script> //方法一: // document.onkeypress=function(e){ // var keycode=document.all?event.keyCode:e.which; // if(keycode

  • 原生js验证简洁注册登录页面

    原生js验证简洁注册登录页面

    序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css

  • ajax编写简单的登录页面

    ajax编写简单的登录页面

    AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ajax的优点: 1.最大的一点是页面无刷新,用户的体验非常好. 2.使用异步方式与服务器通信,具有更加迅速的响应能力. 3.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本.并且减轻服务器的负担,ajax的原则是"按需取数据",可以最大程度的减少冗余请求,和响应对服务器造成的负担. 4.基于

  • jQuery Ajax 实现在html页面实时显示用户登录状态

    当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定ID 如: <div id="ajaxlogin"></div> 二.新建一个动态的ajaxlogin.php文件,用来判断用户是否登录了 代码如下: <? session_start(); if( $_SESSION['u_login']=='turelogi

  • jsp登录页面的简单实例 雏形

    jsp登录页面的简单实例 雏形

    jsp登录页面的简单实例 雏形 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d

  • 一款经典的ajax登录页面 后台asp.net

    一款经典的ajax登录页面 后台asp.net

    下面实现一个经典的登录页面,有保存密码功能,页面上所有的控件都是html控件,没有服务器控件 1,新建一名为login.htm的静态网页文件,作为登录页面,如图 body标签代码 Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 复制代码 代码如下: <body onkeydown ="enterLogin()"> &

随机推荐