Question

好的，所以我真的试图在过去一小时内解决这个问题，这是一件很简单的事情，我从来没有遇到过问题。所以输入＆＃39; username_input＆＃39;如果状态是

，则有一个jQuery

if($('#username_input').val() == 0) {
    alert('Empty');
} else {
    alert('Not empty');
}

之后它移动到＆＃39; password_input＆＃39; if语句是同一个东西，但它会一直警告“空”＃。为什么？

<!doctype html>
<html>
    <head>
        <title> Awflicks </title>
        <meta name=viewport content="width=device-width, initial-scale=1">
        <link type="text/css" rel="stylesheet" href="index.css">
    </head>

    <body>
        <div id="body_div">
            <form action="" method="post">
                <div id="username_div"> Username:  <input type="text" name="username" id="username_input"> </div>
                <div id="password_div"> Password: <input type="password" name="password" id="password_input"> </div>
                <div id="retype_password_div"> Retype password: <input type="password" name="retype_password" id="retype_password_input"> </div>
                <div type="submit" id="submit_button"> Create Account </div>
            </form>
        </div>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script>
                var $username = $('#username_input').val();
                var $password1 = $('#password_input').val();
                var $password2 = $('#retype_password_input').val();

                    function create_account() {
                        if($username == 0) {
                            alert('empty');
                        } else {
                            alert('not empty')
                        }
                    }

                $('#submit_button').click(function() {
                    create_account();
                    document.forms[0].submit();
                })
        </script>
    </body>
</html>

Answer 1

因为当值更改时，带有值的变量不会更新。它是读取时的值。您需要在需要时读取值或将变量设置为on。

也不确定该值如何为零，因为没有设置值。你不应该检查长度吗？并且您将要从验证函数返回一个布尔值，因此您知道要取消表单提交。

Answer 2

您可以直接使用它而无需定义变量

if(!$('#username_input').val()) // or if(!$('#password_input').val()) for password input
{
   alert('empty');
} else {
   alert('not empty')
}

Answer 3

您需要按如下方式重构，以确保$ username只在输入提交后存储值（例如，一旦提交了提交）

function create_account() {
   var $username = $('#username_input').val();
   var $password1 = $('#password_input').val();
   var $password2 = $('#retype_password_input').val();
   if($username == 0) {
      alert('empty');
   } else {
      alert('not empty')
   }
}

Answer 4

在您进行其他答案建议的更改后，即使警报显示“空”，您的表单也会出现问题。实际上，当警报显示“非空”时，它将被提交两次。那是因为你的“submit_button”有type="submit"所以它提交了表单。您可以更改为type="button"，但我的首选是将处理程序绑定到表单的submit-event，而不是按钮的click-event。

$('form').submit(function(event) {
    event.preventDefault(); // Stop the form from getting submitted.

    var username = $('#username_input').val();
    var password1 = $('#password_input').val();
    var password2 = $('#retype_password_input').val();

    var isValid = true;

    if (username == '') {
        alert('Empty');
        isValid = false;
    }

    if (isValid) {
        this.submit(); // Now submit the form.
    }
});

如果jQuery声明|空文本框

4 个答案: