pattern() 函数和 onkeyup() 函数不能一起工作答案

【问题标题】：pattern() function and onkeyup() function not working togetherpattern() 函数和 onkeyup() 函数不能一起工作
【发布时间】：2020-05-14 20:51:55
【问题描述】：

我试图让屏幕显示插入的密码应该在某个 regex 中，在输入字段时使用 pattern 但当我使用 onkeyup () 检查两个密码是否与 onkeyup 工作的部分匹配，但

pattern 信息框不再显示所以我希望知道为什么它不工作，如果两个功能都不允许一起使用或任何东西

这里是 html

<div class ="signupbox">

<h1>Signup</h1>
<form action="">
   <p>Username</p>
    <input type="text" id="user" placeholder="Enter Username"  pattern="^[a-zA-Z0-9]{8,}$" title="please enter a username with only Letters and numbers[0-9]">
    <p>Password</p>
    <input name="password" id="password" type="password" placeholder="Enter Password"  pattern="(?=.*[a-zA-Z].*)(?=.*[A-Z])(?=.*[0-9])(?=.*[#@!%])[a-zA-Z0-9#@!%]{6,}" title="please enter a password with at least 1 capital letter and one special from[#@!%]" onkeyup='check();'/>
    <p>confirm password</p>
    <input type="password" name="confirm_password" id="confirm_password" placeholder="confirm Password"  onkeyup='check();' /> 
    <span id='message'></span>
    <br>
    <input type="submit" id="Signup" disabled  value="Signup" >
</form>

这里是 js

var check = function() {
    if (document.getElementById('password').value ==
      document.getElementById('confirm_password').value) {
      document.getElementById('message').style.color = 'rgb(1, 126, 11)';
      document.getElementById('message').style.fontSize="20px"
      document.getElementById('message').innerHTML = "Passwords are matching";
    } else {
      document.getElementById('message').style.color = 'rgba(255, 0, 0, 0.829)';
      document.getElementById('message').style.fontSize="20px"
      document.getElementById('message').innerHTML = "Passwords are not matching";
      sign.disabled=true;

}  
}

【问题讨论】：

看看这是否有帮助。 Pattern Validation on Input
所以尽管代码执行正确，但消息没有显示事件？如果您尝试以 AngularJS 方式进行操作，也许效果会更好？只需使用 2 条不同的消息和适当的样式创建 2 个跨度，并将 CSS 显示属性设置为 hidden。从 JS 你可以只修改一个属性而不是别的。
您是否在浏览器的 JS 控制台中看到任何错误？
@KamilJanowski 不，浏览器中没有错误，但是当我将鼠标悬停在它上面时，它会在一个黄色的小框中显示它们

标签： javascript html css regex

【解决方案1】：

除了onkeyup='check();'之外，只需将oninput="this.reportValidity()"添加到具有模式的所有输入字段，即可显示基于浏览器的验证反馈。

【讨论】：