Fatal编程技术网
  • java/
  • Java jquery在JSP页面中不工作

Java jquery在JSP页面中不工作

java jquery jsp

Java jquery在JSP页面中不工作,java,jquery,jsp,Java,Jquery,Jsp,我有一个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 = $("#userna

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


$（文档）.ready（函数（）{
$（“#用户名”）.keyup（函数（）{
var username=$（“#username”）.val（）.trim（）；
如果（用户名==“”）
{
$（“#usernameerrortext”）.html（“用户名不应为空”）；
返回false；
}
如果（/[！@$%\^&*（）{}[\]？\/\\-]/.test（用户名））
{
$（“#usernameerrortext”）.html（“用户名不应包含特殊字符”）；
返回false；
}
其他的
{
$（“#usernameerrortext”）.html（“”）；
返回true；
}
});
$（“#密码”）.keyup（函数（）{
var password=$（“#password”）.val（）.trim（）；
如果（密码==“”）
{
$（“#passworderrortext”）.html（“密码不应为空”）；
返回false；
}
其他的
{
$（“#passworderrortext”）.html（“”）；
返回true；
}
});
});

用户名：


密码：
这是一个完美的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>


HDB SBB
$（文档）.ready（函数（）{
$（“#用户名”）.keyup（函数（）{
var username=$（“#username”）.val（）.trim（）；
如果（用户名==“”）
{
$（“#usernameerrortext”）.html（“用户名不应为空”）；
返回false；
}
如果（/[！@$%\^&*（）{}[\]？\/\\-]/.test（用户名））
{
$（“#usernameerrortext”）.html（“用户名不应包含特殊字符”）；
返回false；
}
其他的
{
$（“#usernameerrortext”）.html（“”）；
返回true；
}
});
$（“#密码”）.keyup（函数（）{
var password=$（“#password”）.val（）.trim（）；
如果（密码==“”）
{
$（“#passworderrortext”）.html（“密码不应为空”）；
返回false；
}
其他的
{
$（“#passworderrortext”）.html（“”）；
返回true；
}
});
});
登录

用户名：

密码：
此处需要帮助。

以下是更新的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;
}
});
});

$（文档）.ready（函数（）{
$（“#用户名”）.on（'focusout'，function（）{
var username=$（“#username”）.val（）.trim（）；
如果（用户名==“”）
{    
$（“#usernameerrortext”）.html（“用户名不应为空”）；
返回false；
}
如果（/[！@$%\^&*（）{}[\]？\/\\-]/.test（用户名））
{
$（“#usernameerrortext”）.html（“用户名不应包含特殊字符”）；
返回false；
}
其他的
{
$（“#usernameerrortext”）.html（“”）；
返回true；
}
});
$（“#密码”）.on（'focusout'，function（）{
var password=$（“#password”）.val（）.trim（）；
如果（密码==“”）
{
$（“#passworderrortext”）.html（“密码不应为空”）；
返回false；
}
其他的
{
$（“#passworderrortext”）.html（“”）；
返回true；
}
});
});
我已经为你制作了一个小提琴演示

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

为此，无需做很多事情，只需在head标记中添加这一行

在chrome上加载jsp并检查页面（右键单击并点击inspect元素）。看看你是否能解决这个问题。如果您遇到任何错误，请尝试查看您的浏览器控制台，如果您使用的是chrome，请检查元素并查看是否有任何错误。如果有，请告知我们Define not working。您在javascript控制台中看到的错误是什么？您是否尝试过使用
而不仅仅是
？使用if（password===“”）进行比较，为什么要使用jquery BTW的这么旧的（1.5.2）库。我想@kalai对脚本没有问题。当扩展名为file.jsp时，浏览器中不会显示任何内容。如果是.html，那么它可以工作。您已经在FIDLE中编写了html代码。kalai提供的脚本也无法在html页面上运行。。我只是复制粘贴了html代码@kalai post来检查Jquery。实际上，kalai并没有确切地提到这个问题。是脚本问题还是扩展问题。问题是我不知道如何使用jquery插件。你能告诉我如何解决它吗。为了运行jquery，是否需要在动态web项目中添加任何内容。我想我得到的来源，所以我不需要添加任何它似乎。如果我错了，请纠正我