在密码输入上使用 required 属性答案

【问题标题】：Using the required attribute on a password input在密码输入上使用 required 属性
【发布时间】：2016-12-01 13:30:11
【问题描述】：

我正在尝试按照 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;

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

【问题讨论】：

您的提交按钮不是真正的提交按钮。这只是一个常规按钮。
@4castle 下面 user2181397 的回答是否会变成“真正的”提交按钮？
是的，确实如此。因为现在他们通过表格建立了关系。否则，按钮不知道它应该验证其他输入。 div 没有语义。

标签： javascript html css input passwords

【解决方案1】：

将元素包装在表单中

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

不使用form也可以查看

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

这将返回一个布尔值，但你不会看到错误弹出

JSFIDDLE

【讨论】：

有什么特殊的原因将整个东西包装在一个 div 中吗？是否可以不使用 div 而是使用以下属性创建外部元素：<form class = "login">？ @user2181397
是的，可以做到。不需要 您可以在 form 上签名。我刚刚重用了你的 dom
当我点击我的按钮时，网页有时会刷新。我怎样才能阻止这种情况发生？ @user2181397