在密码输入中使用必需的属性

Using the required attribute on a password input

本文关键字：属性 密码 输入      更新时间：2023-09-26

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

我从这篇文章中学到了如何做到这一点，但它似乎不适用于我的密码输入。

<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;

正如您所看到的，当用户未能输入密码时，不需要弹出窗口。有人知道为什么不呢？

将元素包装成形式

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

您也可以在不使用form 的情况下进行检查

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

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

JSFIDDLE

相关文章：