javascript - 在密码输入上使用 required 属性

Question

我正在尝试根据 JavaScript 的要求设置密码输入。

我从this中学到了发布操作方法，但它似乎不适用于我的密码输入。

<div class = "login">
<input type = "password" class = "enterPassword">
<button class = "submit">Submit</button>
</div>

var p = document.querySelector(".enterPassword");
p.required = true;
p.style.backgroundColor = "gray";

var s = document.querySelector(".submit");
s.addEventListener("click", clickHandler.bind(p));

function clickHandler() {
    console.log("Password: " + this.value);
}

jsfiddle

虽然我有，

var p = document.querySelector(".enterPassword");
p.required = true;

如您所见，当用户输入密码失败时，不需要弹出窗口。有谁知道为什么不呢？

Answer 1

将元素包裹在一个表单中

<form>
<input type = "password" class = "enterPassword">
<button class = "submit">Submit</button>
</form>

不使用form也可以查看

document.querySelector(".enterPassword").validity.valid

这将返回一个 bool 值，但您不会看到错误弹出

JSFIDDLE