-2

我有一个 HTML 代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {

    $("#username").keyup(function(){

    var username = $("#username").val().trim();

    if(username=="")
    {
         $("#usernameerrortext").html("Username should not be empty");
         return false;
    }
    else if(/[!@#$%\\^&*(){}[\]<>?\/|\-]/.test(username))
    {
        $("#usernameerrortext").html("Username should not contain special charatcers");
        return false;
    }
    else
    {
        $("#usernameerrortext").html("");
        return true;
    }
    });

    $("#password").keyup(function(){
    var password = $("#password").val().trim();

    if(password=="")
    {
         $("#passworderrortext").html("Password should not be empty");
         return false;
    }
    else
    {
        $("#passworderrortext").html("");
        return true;
    }
    });
});
</script>
<br/>Username:<input type="text" name="username" id="username"/>
<font color="red"><div id="usernameerrortext"></div></font>
<br>
Password:<input type="password" name="password" id="password"/>
<font color="red"><div id="passworderrortext"></div></font>

这是一个完美的 html 页面。但是当我将此代码粘贴到如下所示的 JSP 文件中时，我的 jquery 无法正常工作，

<%@ 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>HDB SBBS</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {

    $("#username").keyup(function(){

    var username = $("#username").val().trim();

    if(username=="")
    {
         $("#usernameerrortext").html("Username should not be empty");
         return false;
    }
    else if(/[!@#$%\\^&*(){}[\]<>?\/|\-]/.test(username))
    {
        $("#usernameerrortext").html("Username should not contain special charatcers");
        return false;
    }
    else
    {
        $("#usernameerrortext").html("");
        return true;
    }
    });

    $("#password").keyup(function(){
    var password = $("#password").val().trim();

    if(password=="")
    {
         $("#passworderrortext").html("Password should not be empty");
         return false;
    }
    else
    {
        $("#passworderrortext").html("");
        return true;
    }
    });
});
</script>
</head>
<body>
        <center>
            <h2>Login</h2>
            <form name="loginForm" id="loginForm" action="LoginServlet" method="post">
            <br/>Username:<input type="text" name="username" id="username">
            <font color="red"><div id="usernameerrortext"></div></font>
            <br/>Password:<input type="password" name="password" id="password">
            <font color="red"><div id="passworderrortext"></div></font>
            <br/><input type="submit" value="Submit">
            </form>
        </center>
    </body>
</html>

这里需要帮助。

4

1 回答 1

0

这是更新的 Jquery 代码：

$(document).ready(function() {

$("#username").on('focusout',function(){

var username = $("#username").val().trim();

if(username==="")
{    
     $("#usernameerrortext").html("Username should not be empty");
     return false;
}
else if(/[!@#$%\\^&*(){}[\]<>?\/|\-]/.test(username))
{
    $("#usernameerrortext").html("Username should not contain special charatcers");
    return false;
}
else
{
    $("#usernameerrortext").html("");
    return true;
}
});

$("#password").on('focusout',function(){
var password = $("#password").val().trim();

if(password==="")
{
     $("#passworderrortext").html("Password should not be empty");
     return false;
}
else
{
    $("#passworderrortext").html("");
    return true;
}
});
});

我为你创建了一个演示小提琴，这里是FIDDLE

您需要在要运行此脚本的页面的 head 标记中包含 jquery 库。

为此，无需做太多事情，只需在 head 标签中添加这一行<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

于 2013-09-18T08:57:51.217 回答