querySelector仅匹配首个input 如何选中最后一个密码框绑定事件

• document.querySelector("input") 的API特性就是仅返回DOM树中匹配选择器的第一个元素，所以你代码里拿到的永远是排在前面的昵称输入框，无法选中后续的密码输入框。
• 代码里附带两个不影响核心绑定逻辑的小错误：
  • 第二个<label>的for属性值写的是pseudo，和对应密码输入框的idmdp不匹配，点击标签无法聚焦到密码框
  • 事件回调的参数命名为element，但else分支里打印日志时用了未定义的e变量，会触发JS报错

直接通过密码输入框的唯一id选中目标元素，不要用标签名泛选；事件回调内通过事件对象的target属性操作当前触发事件的输入框，避免硬编码元素变量带来的指向错误。

修正后的HTML代码 #

<label for="pseudo">Rentrez un pseudo </label>
<input type="text" id="pseudo"> 

<!-- 修正label的for属性值和输入框id对应 -->
<label for="mdp">Rentrez un mdp</label>
<input type="password" id="mdp">

<script src="js/verif_filed.js"></script>

修正后的JS代码 #

// 通过id精准选中密码输入框，避免选中第一个昵称输入框
const passwordInput = document.querySelector("#mdp");

const cara_nbr = Array.from("0123456789");
const cara_lower = Array.from("abcdefghijklmnopqrstuvwxyz");
const cara_upper = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");

passwordInput.addEventListener('input', (e) => {
    let have_nbr = false;
    let have_spetial = false;
    let have_lower = false;
    let have_upper = false;
    const inputVal = e.target.value;

    for (let char of inputVal) {
        if (cara_nbr.includes(char)) have_nbr = true;
        if (cara_lower.includes(char)) have_lower = true;
        if (cara_upper.includes(char)) have_upper = true;
        if (!cara_nbr.includes(char) && !cara_lower.includes(char) && !cara_upper.includes(char)) {
            have_spetial = true;
        }
    }

    // 直接操作当前触发事件的输入框，样式修改不会错绑到其他元素
    if (inputVal.length >= 8 && have_nbr && have_spetial && have_lower && have_upper) {
        e.target.style.borderColor = "green";
    } else {
        e.target.style.borderColor = "red";
        console.log(inputVal);
        console.log(have_nbr, have_lower, have_upper);
    }
})

扩展提示 #

如果后续需要给多个输入框绑定同类校验逻辑，可以用document.querySelectorAll("input")获取页面所有输入框的集合，遍历给每个输入框绑定input事件即可，不需要单独为每个输入框写绑定代码。

内容的提问来源于stack exchange，提问作者Frank Ithen