Question

我真的没有时间去学习尽可能多的jQuery。当密码太短时，我编写了阻止子目录并显示错误的函数：

var password = document.getElementById('password');
var registerButton = document.getElementById('registerButton');
var text = document.getElementById('passwordStrengthText');
var value = password.value;
if (value === "") {
    registerButton.disabled = true;
}

password.addEventListener('input', function () {
    var value = password.val();
    if (value.length < 4 || value === "") {
        text.innerHTML = "(Too Short)";
        registerButton.disabled = true;
    }
    else {
        text.innerHTML = "";
        registerButton.disabled = false;
    }
});

jQuery：

var password = $('#password');
var registerButton = $('#registerButton');
var text = $('#passwordStrengthText');
var value = password.val();
if (value === "") {
    registerButton.disabled = true;
}

password.addEventListener('input', function () {
    var value = password.val();
    if (value.length < 4 || value === "") {
        text.innerHTML = "(Too Short)";
        registerButton.disabled = true;
    }
    else {
        text.innerHTML = "";
        registerButton.disabled = false;
    }
});

此代码位于passwordStrength.js文件中，在包含bootstrap jquery之后，该文件包含在我的html文件中。有人可以解释为什么它不起作用吗？第一个版本就像我想要的一样。

Answer 1

您在jQuery版本中缺少很多东西。

首先，要设置jQuery中元素的ChronoUnit.DAYS.between( LocalDate.parse( "2018-06-14" ) , LocalDate.parse( "2018-06-06" ) )属性，请使用disabled。

然后，要设置元素的HTML，请使用.prop('disabled',true);

在jQuery中，您也可以停止使用.html("...");，而改为使用addEventListener。

这是您代码的有效版本：

.on()

let password = $('#password');
let registerButton = $('#registerButton');
let text = $('#passwordStrengthText');
let value = password.val();
if (value === "") {
    registerButton.prop('disabled',true);
}

password.on('input', function () {
    let value = $(this).val();
    if (value.length < 4 || value === "") {
        text.html("(Too Short)");
        registerButton.prop('disabled',true);
    }
    else {
        text.html("");
        registerButton.prop('disabled',false);
    }
});

Answer 2

您在此处尝试在jQuery对象上执行本机js命令，您需要使用相应的jQuery语法：

var password = $('#password');
var registerButton = $('#registerButton');
var text = $('#passwordStrengthText');
var value = password.val();
if (value === "") {
    registerButton.attr('disabled', true);
}

password.on('input', function () {
    var value = password.val();
    if (value.length < 4 || value === "") {
        text.html("(Too Short)");
        registerButton.attr('disabled', true);
    }
    else {
        text.html("");
        registerButton.attr('disabled', false);
    }
});

另一种方法是通过[0]或.get(0)从jQuery对象获取本机HTML元素，但是如果您这样做，则可以使用nativ js而不是jQuery

将代码从js更改为jQuery

2 个答案: