问题1您的逻辑倒退

Question

我正在尝试使用jquery做一个简单的控件，如果用户名和密码不为空，则应该在单击时显示警告。

实际上，我已经为jquery尝试了以下代码，但是它没有效果，在控制台中没有任何响应，没什么。

<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />

<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />


<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $('#loginbtn').click(function() {
    if (!$('#username').val() && !$('#password').val()) {
      alert("VAI!");
    }
  });
</script>

编辑： 这是页面的完整代码，在代码背后没有任何内容，似乎javascript在执行功能click时就死了。

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="auth.aspx.vb" Inherits="servizigab.auth" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="icon" type="image/png" href="assets/img/favicon.ico" />
    <title>Gab Servizi: Login</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link href="/assets/css/bootstrap.min.css" type="text/css" runat="server" rel="stylesheet" />
    <link href="/assets/css/modalstyle.css" type="text/css" runat="server" rel="stylesheet" />
    <link href="/assets/css/login.css" type="text/css" runat="server" rel="stylesheet" />


</head>

<body class="text-center fade-in">
    <form class="form-signin" runat="server">


        <img class="mb-2" draggable="false" src="assets/img/gabservizi.png" alt="" width="160" height="160" />

        <h1 class="h3 mb-3 font-weight-normal" translate="yes">Accedi a Gab Servizi!</h1>
        <label for="username" class="sr-only">Username</label>
        <input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />

        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />


        <input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login"/>

        <p class="text-muted mt-2 mb-3">Non hai un profilo? <a href="#" class="text-primary">Richiedilo!</a></p>


        <div class="myAlert-bottom alert alert-danger">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Password o nome utente errati!</strong> Riprovare!
        </div>

        <iframe id="log" class="d-none"/>

    </form>

                        <!-- librerie js -->
    <script src="/assets/js/core/jquery.3.2.1.min.js"></script>
    <script src="/assets/js/core/popper.min.js"></script>
    <script src="/assets/js/core/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $('#loginbtn').click(function() {
    if ($('#username').val() && $('#password').val()) {
      alert("VAI!");
    }
  });

</script>

</body>
</html>

Answer 1

问题1您的逻辑倒退

!并非如此。

因此，您正在测试它们是否均为空（例如，用户名没有值，密码也没有值），并且它们是否都具有值。

删除!。

<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />

<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />


<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $('#loginbtn').click(function() {
    if ($('#username').val() && $('#password').val()) {
      alert("VAI!");
    }
  });
</script>

问题2：您的HTML无效

使用a validator。它将告诉您<iframe>缺少结束标记。这样会将其后的所有内容（包括脚本）放入iframe内，因此该脚本被视为不支持iframe且未执行的浏览器的替代内容。

Answer 2

使用字符串length属性：

<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />

<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />


<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $('#loginbtn').click(function() {
    //check if both the username and password values have
    // lengths grater then zero
    if ($('#username').val().length > 0 && $('#password').val().length > 0) {
      alert("VAI!");
    }
  });
</script>

或者只是从您自己的代码中删除!（不是）符号。

Answer 3

如果您的页面上还有许多其他JavaScript代码，则最好将事件绑定到$（document）.ready中。如果没有其他javascript代码，则您的代码可以完美运行。

只需在$（document）.bind中绑定单击事件，如下所示

$(document).ready(function() {
  $('#loginbtn').click(function() {
    if ($('#username').val() && $('#password').val()) {
      alert("VAI!");
    }
  });
})

<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

它将起作用。

Answer 4

if ($('#username').val() && $('#password').val()) {

点击时的jQuery没有任何作用

4 个答案:

问题1您的逻辑倒退

问题2：您的HTML无效