Question

我有一个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>

这里需要帮助。

Answer 1

这是更新的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 lib。

因为没有什么必须做，只需在头标记<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

中添加此行

jquery在JSP页面中不起作用

1 个答案: