javascript错误中的密码和确认密码验证？

Question

 var password = document.getElementById("password"); var confirm_password = document.getElementById("confirm_password"); function validatePassword() { if(password.value != confirm_password.value) { confirm_password.setCustomValidity("Passwords Don't Match"); } else if(password.value=='') { password.setCustomValidity("Passwords must not be empty"); } else { password.setCustomValidity(''); } } password.onchange = validatePassword; confirm_password.onkeyup = validatePassword;

 <input type="password" name="password" id="password" placeholder="Please Enter Password" required="required"/> <input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password" required="required"/>

我需要在提交时显示密码为空消息而不输入任何内容。
它验证不匹配，但不验证空字段。 有什么解决办法吗？

Answer 1

尝试像这样使用|| （或）条件，

<input type="password" name="password" id="password" placeholder="Please Enter Password" required="required"/>
<input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password"  required="required"/>

<script>
    var password = document.getElementById("password");
    var confirm_password = document.getElementById("confirm_password");

function validatePassword()
{
    if(password.value != confirm_password.value)
    {
        confirm_password.setCustomValidity("Passwords Don't Match");
    } 
    else if(password.value == '' || password.value == undefined || password.value == null)
    {
        password.setCustomValidity("Passwords must not be empty");
    } 
    else
    {
        password.setCustomValidity('');
    }
}
password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;
</script>

Answer 2

必须是这个顺序。 首先检查空值。 试试这个

    if(password.value=="")
    {
        password.setCustomValidity("Passwords must not be empty");
    } 
    else if(password.value != confirm_password.value)
    {
        confirm_password.setCustomValidity("Passwords Don't Match");
    } 
    else
    {
        password.setCustomValidity('');
    }

Answer 3

由于您没有在<input>标签中设置内联setCustomValidity() ，您甚至可以删除required属性并将所有验证留给您的 JS 脚本（只需确保正确处理您的submit event ，例如使用e.preventDefault() ) 。 这是为了避免触发默认验证。 其次，在你的逻辑中，你的password.setCustomValidity(''); 每次满足上述两个条件之一时都不会重置。

因此，对于您的情况，为了安全起见，请尝试以下操作：

删除required属性并添加oninput属性：

<input type="password" name="password" id="password" placeholder="Please Enter Password" oninput="this.setCustomValidity('')" />

oninput="this.setCustomValidity('')"将确保每次编辑密码时重置自定义有效性。 然后在你的 JS 代码中：

function validatePassword()
{
    if(password.value.trim() == "")
    {
        password.setCustomValidity("Passwords must not be empty");
        password.reportValidity();
    } 
    else if(password.value != confirm_password.value)
    {
        confirm_password.setCustomValidity("Passwords Don't Match");
        confirm_password.reportValidity();
    }; /* else
    {
        password.setCustomValidity("");
    } */
}

请注意，如果您不更改逻辑顺序，则只要confirm_password具有值，就永远不会触发"Passwords must not be empty" ——尽管它仍然可以触发mismatch错误。 它仅在两者都为空时有效。

Answer 4

您必须使用.reportValidity()才能实际显示警告。

 var password = document.getElementById("password"); var confirm_password = document.getElementById("confirm_password"); function validatePassword() { if(password.value != confirm_password.value) { confirm_password.setCustomValidity("Passwords Don't Match"); confirm_password.reportValidity(); } else if(password.value.trim() == "") { password.setCustomValidity("Passwords must not be empty"); password.reportValidity(); } else { password.setCustomValidity(""); } } password.onchange = validatePassword; confirm_password.onkeyup = validatePassword;

 <input type="password" name="password" id="password" placeholder="Please Enter Password" required /> <input type="password" name="confirm_password" id="confirm_password" placeholder="Confirm Password" required />