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

您必须使用.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 />

Answer 3

It must be in this sequence. Check empty value first. try this

    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 4

由于您没有在setCustomValidity()标记中设置<input>内联，因此甚至可以删除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("");
    } */
}

请注意，如果您不更改逻辑顺序，则"Passwords must not be empty"永远不会触发confirm_password，尽管它仍然可以触发mismatch错误。仅在均为空时使用。

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

4 个答案: