Javascript，使用引导程序验证密码

Question

我正在尝试使用 bootstrap v5 学习 Javascript 和一些基本的 HTML。

我创建了一个登录表单，现在我尝试对必填字段进行一些验证。

我遵循了 Bootstrap 文档，我设法验证了除密码之外的所有输入字段，我想验证密码是否相同或者它们是否为空字段……但我被卡住了……不熟悉javascript。

我在 javascript 中的尝试：

let forms = document.querySelectorAll(".needs-validations");
let pass1 = document.getElementById("password1");
let pass2 = document.getElementById("password2");


Array.prototype.slice.call(forms).forEach( function (form){
    form.addEventListener("submit",function (ev) {

        // test password check....
        if (pass1.value !== pass2.value || pass1.value === "" || pass2.value === "" ){
            pass1.className = 'form-control is-invalid'
            pass2.className = 'form-control is-invalid'
        }

        if (!form.checkValidity()){
            ev.preventDefault()
            ev.stopPropagation()
        }
        form.classList.add("was-validated")

    })
})

但这里的结果是： 如您所见，密码始终有效，我不明白为什么。

我的 HTML：

<body class="body">

        <div class="center">
            <h4 class="title">Sign Up New User</h4>
        <form name="signin-form" method="post" class="needs-validations" novalidate id="forms">
            <div class="container">

                <div class="row mt-3">
                    <div class="col">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Name" required>
                        <div class="invalid-feedback">
                            Name can't be empty
                        </div>
                    </div>
                    <div class="col">
                        <label for="surname" class="form-label">Surname</label>
                        <input type="text" class="form-control" id="surname" placeholder="Surname" required>
                        <div class="invalid-feedback">
                            Surname can't be empty
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" placeholder="Email" required>
                        <div class="invalid-feedback">
                            invalid email
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <label for="email" class="form-label">Role</label>
                        <select class="form-select" id="validationCustom04" required>
                            <option selected disabled value="">Choose...</option>
                            <option>Captain</option>
                            <option>First Officer</option>
                        </select>
                        <div class="invalid-feedback">
                            Please select role
                        </div>
                    </div>
                </div>

                <div class="row mt-3 ">
                    <div class="col">
                        <label for="password1" class="form-label ">Password</label>
                        <input type="password" class="form-control" id="password1" placeholder="Password">
                    </div>
                    <div class="col">
                        <label for="password2" class="form-label ">Confirm Password</label>
                        <input type="password" class="form-control" id="password2" placeholder="Password">
                        <div class="invalid-feedback">
                            Password not match
                        </div>
                    </div>
                </div>
                <div class="row-cols-2 mt-3">
                    <button class="btn btn-primary" type="submit">Submit form</button>
                </div>
            </div>
        </form>

        </div>

        <script src="/validation.js"></script>
        <script src="/js/bootstrap.bundle.min.js" ></script>

</body>

Answer 1

我不明白的是，您的密码字段在您发布的屏幕截图中似乎有一个有效的类。但我无法在您的代码中的任何地方找到它（无论是 HTML 还是 JS）。

我会这样做：

（注意：我没有测试这段代码，但它应该可以工作。如果它可以工作并且你想从中学习，我建议你一步一步地阅读它并将它应用到你的逻辑中，而不是仅仅复制意大利面。）

let form = document.querySelector("form.needs-validations");
// or, to be more specific: 
// let form = document.querySelector("form[name='signing-form']")

form.addEventListener("submit",function (ev) {
  let pass1 = document.getElementById("password1");
  let pass2 = document.getElementById("password2");

  // test password check....
  if (pass1.value !== pass2.value || pass1.value === "" || pass2.value === "" ){
    pass1.classList.add('is-invalid');
    pass2.classList.add('is-invalid');
  }

  if (!form.checkValidity()){
    ev.preventDefault();
    ev.stopPropagation();
  }
  form.classList.add("was-validated");
})

注意：验证密码字段内容的功能只会在您点击提交按钮后触发。