Javascript 导航到"；index.html？“；在按钮上单击“不设置元素”

我是html和javascript新手。 我的按键似乎有问题。 如果用户名/密码为空，则需要将输入框的边框设置为红色，然后让我再次填写。 问题是，当输入框为空时，当我单击按钮时，输入框会被设置为红色，持续半秒钟，然后网页最终显示为index.html？不知道为什么我在谷歌chrome中观看控制台，它显示

login_button Clicked
index.js:34 username == null
index.js:41 password  == null
Navigated to file:////index.html?

按钮点击

$('#login_button').click(function () {
    console.log("login_button Clicked");
    var username = $('#login_username').val();
    var password = $('#login_password').val();

    if (username == "") {
        console.log("username == null");
        $('#login_username').css({
            "border": '#FF0000 1px solid'
        });
    }

    if (password == "") {
        console.log("password  == null");
        $('#login_password').css({
            "border": '#FF0000 1px solid'
        });
    }

    if (username && password) {
        console.log("Login");
    }
});

我用铬合金做的 例外情况 : DomeException:未能在“元素”：“*”上执行“querySelectorAll”，：x不是有效的选择器

$('#login_button').click(function (e) {
    e.preventDefault();

    console.log("login_button Clicked");
    var username = $('#login_username').val();
    var password = $('#login_password').val();

    if (username == "") {
        console.log("username == null");
        $('#login_username').css({
            "border": '#FF0000 1px solid'
        });
    }

    if (password == "") {
        console.log("password  == null");
        $('#login_password').css({
            "border": '#FF0000 1px solid'
        });
    }

    if (username && password) {
        console.log("Login");
    }
});

---

您只需捕获事件并阻止按钮中的默认操作，您可能不会更改类型，因此默认情况下，它会为您提交表单。 您可以使用preventDefault功能阻止提交，也可以使用type属性更改按钮的默认行为

---

type=“button”

您不是event.prevent默认值，因此当您单击链接（我猜是SRC=“#”或SRC=“/”）时，它将指向链接位置

前两行应该是：

$（“#登录按钮”）。单击（功能（e）{
e、 preventDefault（）；

添加

返回false

或添加

事件。preventDefault（）；

以防止在数据为空或错误时提交表单

请看两者之间的区别：

---

你可以用CSS而不是Javascript来完成所有这些。我不知道怎么做，我需要调用更多的Javascript函数来登录，这只是一个测试

if (username == "") {
        console.log("username == null");
        $('#login_username').css({
            "border": '#FF0000 1px solid'
        });
      return false;
 }