javascript无法正常工作

时间：2014-06-17 06:31:14

标签： javascript html css jsp

jsp和loginValidate.js我在jsp中提供了js的链接。但是登录表单没有得到验证。我有一个span id，它应该显示一条错误消息，但它没有发生。

我的login.jsp是：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Header</title>
<script type="text/javascript" src="js/LoginValidate.js"></script>
<link href="CSS/Header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div class="wrapper col1">
<div id="header">
<div id="logo">
<h1>
<U>SK Business Group, Inc.</U>
</h1>
<p>
<strong>Helping GROW your business</strong>
</p>
</div>
<div class="wrapper col6">
<div id="head">
<div id="login">
<h2>Login !</h2>
<B>Already have an account.LOGIN here</B>
<form name="login" action="LoginValidateServlet" method="post"
onSubmit="return loginValidate()">
<input type="hidden" name="pagename" value="login" />
<fieldset>
<legend>Client Login</legend>
<div class="fl_left">

<input type="text" name="txtUsername" id="uname" value="Enter Username&hellip;" onfocus="this.value=(this.value=='Enter Username&hellip;')? '' : this.value;" /><br />
<span id="errorUserNameMissing" style="display: none;"><font
color="red">*Enter user name.</font></span>

<input type="password" name="txtPassword" id="pass" value="Enter Password&hellip;" onfocus="this.value=(this.value=='Enter Password&hellip;')? '' : this.value ;" /><br/> <br/><span
id="errorPasswordMissing" style="display: none;"><font
color="red">*Enter Password.</font></span>

<select name="txtCategory" id="txtCategory" style="width: 230px">
<option value="unknown">Select your Category</option>
<option value="Admin">Admin</option>
<option value="Affiliate">Affiliate</option>
<option value="Client">Client</option>

</select>
</div>
<div class="fl_right">
<input type="submit" name="login_go" id="login_go"
value="&raquo;" />
</div>
</fieldset>
</form>
<p>
<a href="LostPassWordServlet">» Lost Your Password</a> | <a
href="SignupServlet">Create An Account »</a>
</p>
</div>

<br class="clear" />
</div>
</div>
</div>
</div>
</div>

</body>
</html>

这是我的CSS 

    @CHARSET "ISO-8859-1";

#top {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #DDDDDD;
}

.clear {
    clear: both;
}

br.clear {
    clear: both;
    margin-top: -15px;
}

a {
    outline: none;
    text-decoration: none;
}

.fl_left {
    float: left;
}

.fl_right {
    float: right;
}

div.wrapper {
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
}

div.wrapper h1,div.wrapper h2,div.wrapper h3,div.wrapper h4,div.wrapper h5,div.wrapper h6
    {
    margin: 0 0 20px 0;
    padding: 0 0 8px 0;
    font-size: 20px;
    font-weight: normal;
    font-family: Georgia, "Times New Roman", Times, serif;
    border-bottom: 1px dotted #DDDDDD;
}

.col1 {
    color: #2684B7;
    background-color: #E3F1F9;
}

.col6 {
    color: #999999;
    background-color: #F3F3F3;
}

.col6 a {
    color: #2684B7;
    background-color: #F3F3F3;
}

#logo {
    width: 378px;
}

#header,#head {
    color: #2684B7;
    position: relative;
    margin: 0 auto 0;
    display: block;
    width: 960px;
}

#header {
    padding: 30px 0;
    font-family: Georgia, "Times New Roman", Times, serif;
}

#header #logo {
    display: block;
    float: left;
    width: 300px;
    width: 100%;
    margin-top: 7px;
}

#header #logo h1,#header #logo p {
    margin: 0;
    padding: 0;
    line-height: normal;
}

#header #logo h1 {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 36px;
    border: none;
}

#header h1 a {
    color: #3A6C86;
    background-color: #E3F1F9;
}

#header #login {
    width: 300px;
    height: 250px;
    float: right;
    padding: 10px 10px 12px 10px;
    color: #000000;
    background-color: #ADD6ED;
}

#header #login p {
    margin: 0 0 8px 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#head {
    padding: 30px 0;
}

#head h2 {
    margin-bottom: 10px;
    border-bottom: 1px dotted #999999;
}

#login {
    display: block;
    float: right;
    width: 300px;
}

form,fieldset,legend {
    margin: 0;
    padding: 0;
    border: none;
}

legend {
    display: none;
}

#header input {
    display: block;
    float: left;
    width: 155px;
    margin: 0 11px 0 0;
    padding: 5px;
    color: #4C4C4C;
    background-color: #FFFFFF;
    border: 1px solid #396B86;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#header input#login_go {
    width: auto;
    height: auto;
    margin: 0;
    padding: 4px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: #4D9FC7;
    cursor: pointer;
}

#head form {
    display: block;
    width: 300px;
    margin: 0;
    padding: 10px 0 0 0;
    border: none;
}

#head input {
    display: block;
    width: 218px;
    margin: 0 0 10px 0;
    padding: 5px;
    color: #FFFFFF;
    background-color: #2684B7;
    border: 1px solid #1C5E82;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#head input#login_go {

    width: 58px;
    height: 100px;
    margin: 0;
    padding: 0;
    font-weight: bold;
    text-transform: uppercase;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 60px;
    cursor: pointer;
}

#head select#txtCategory {
    width: width:956px;
}

这是我的LoginValidate.js 

    function loginValidate() {
    var valid = true;
    var validationMessage = 'Please correct the following errors:\r\n';
    document.getElementById('errorUserNameMissing').style.display = 'none';
    document.getElementById('errorPasswordMissing').style.display = 'none';
    if ((document.getElementById('uname').value = 'Enter Username…')||(document.getElementById('uname').value.length == 0) ){
        validationMessage = validationMessage + '  - UserName is missing\r\n';
        document.getElementById('errorUserNameMissing').style.display = 'block';
        valid = false;
    } else {
        document.getElementById('errorUserNameMissing').style.display = 'none';
    }
    if ((document.getElementById('pass').value = 'Enter Password…')||(document.getElementById('pass').value.length == 0) ){
        validationMessage = validationMessage + '  - Password is missing\r\n';
        document.getElementById('errorPasswordMissing').style.display = 'block';
        valid = false;
    } else {
        document.getElementById('errorPasswordMissing').style.display = 'none';
    }
    if (valid == false) {
        alert(validationMessage);
    }
    return valid;
}

请一些帮助验证登录页面，如果没有提供任何输入，则会显示错误（它应显示相应的错误消息）。

提前致谢

3 个答案:

答案 0 :(得分：1)

在JavaScript中

document.getElementById('uname').value

返回"Enter Username…"，这是默认值

document.getElementById('uname').value.length

返回15条件不匹配的原因。

您必须检查默认值以及长度。

document.getElementById('uname').value = 'Enter Username…'

但是一旦这个字段被聚焦，该值就是空的，它可以正常工作。

答案 1 :(得分：1)

您的代码在这里提供空指针异常 document.getElementById('errorPassWordMissing').style.display = ''; 异常提升，您的函数不会返回false并形成发布数据。

例如，

使用placeholder属性而不是value和focus事件 <input type="password" name="txtPassword" id="pass" placeholder="Enter password&hellip;" />

也可能是你应该使用jQuery和验证插件 http://plugins.jquery.com/validate/

答案 2 :(得分：0)

我可以看到一个明显的问题。这是错的：

document.getElementById('errorUserNameMissing').style.display = '';

您不应将style.display设置为空白字符串。它应该是标准的CSS显示类型之一，如“内联”或“块”（还有其他类型）。

相关问题
最新问题