设置第二个验证消息

Question

我想为我的密码输入设置第二个验证消息，但它不起作用，您能帮我吗？

这是我的标签：

<input id="password" style="text-align:center;" type="text" name="password" 
     tabindex="3" pattern="[a-zA-Z0-9].{5,}" title="" required 
     oninvalid="this.setCustomValidity('Please enter a password')" 
     oninput="this.setCustomValidity('')" 
     onkeyup="deleteBadConfirm(); valid_pass();" /> 

这也是亩js函数第二验证消息：

function valid_pass() { 
    if(document.getElementById("password").value != "") { 
    document.getElementById("password") 
      .setCustomValidity('At least, enter 6 characters; Don't use any symbols'); 
    }; 
}; 

function deleteBadConfirm() { 
    $("#confirmpassword").prop("value", ""); 
}; 

编辑：这是它应该如何下去， 如果用户在输入密码之前按提交，消息显示“请输入密码”。然后，如果用户输入密码，但它无效，这次该消息应该说“至少输入6 ...”。现在，它显示第一条消息，但是如果输入少于6个字符，它仍会显示旧消息，如果输入6个无效字符，则不会显示任何消息！

Answer 1

你有以下线路错误 通过添加一个转义字符更改此

document.getElementById("password") 
      .setCustomValidity('At least, enter 6 characters; Don't use any symbols'); 

要

document.getElementById("password") 
      .setCustomValidity('At least, enter 6 characters; Don\'t use any symbols'); 

- 反斜杠（）

Answer 2

清除oninvalid事件或它总会覆盖你的setCustomValidity。添加了:invalid CSS伪类来检查值是否有效。

function valid_pass() { 
 
    if (document.getElementById("password").value != "") { 
 
    if ($('#password').is(":invalid")) { 
 
     document.getElementById("password") 
 
     .setCustomValidity('At least, enter 6 characters; Don\'t use any symbols'); 
 
    }; 
 
    } else { 
 
    document.getElementById("password") 
 
     .setCustomValidity('Please enter a password'); 
 
    }; 
 
}; 
 

 
function deleteBadConfirm() { 
 
    $("#confirmpassword").prop("value", ""); 
 
}; 
 

 
//Added this to show setCustomValidity message/tooltip without submit event 
 
function runReportValidity() { 
 
    document.getElementById("password").reportValidity(); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="password" style="text-align:center;" type="text" name="password" tabindex="3" pattern="[a-zA-Z0-9].{5,}" title="" required oninvalid="valid_pass()" oninput="this.setCustomValidity('')" onkeyup="deleteBadConfirm(); valid_pass();" /> 
 

 
<!-- Added this to show setCustomValidity message/tooltip without submit event --> 
 
<input type="button" onClick="runReportValidity()" value="Report Validity">