TextArea - 使用 CSS 伪类和正则表达式进行 Javascript 验证

Question

a.）目前我有一个 php / html 表单，使用 html 输入模式进行输入验证。 b.) 为了表明输入的输入是正确的，我通过类“check_valid”使用 css 伪属性 user-invalid / user-valid，如下所示；

input.check_valid:user-invalid     { border: 4px dotted red;   }
input.check_valid:user-valid       { border: 4px solid  green; }

c.) 问题在于文本区域和缺乏模式支持。我所拥有的是；

textarea.check_valid:user-invalid  { border: 4px dotted red;   }
textarea.check_valid:user-valid    { border: 4px solid  green; }

但是，这仅检查最小长度/最大长度，而不检查内容。

但是 - 我有服务器端验证（在 php 中）工作正常。

d.）我正在寻找一个 javascript 片段，它将在用户离开文本区域时模仿 check_valid:user-invalid / check_valid:user-valid 的行为。

这是我到目前为止所拥有的（不完整）；

const textArea1 = document.getElementById("textarea1");

textArea1.addEventListener("change", (event) => {

  let patternTextArea1 = ~^[a-zA-Z0-9:\s,.'&()\/\-]{10,550}$~; 
   
  if ( // test textarea content against the regex ) {
  
      // apply user-valid - green border
    
  } else {
  
     // apply user-invalid - red dotted line
    
  }
  
});

正如上面所证明的，我的 javascript 技能很差劲。

我们将非常感谢您的帮助。

Answer 1

您问的是如何强制一个元素成为

:user-valid

或另一个

:user-invalid

。这可能吗？是的。使用

inputField.setCustomValidity(msg)

。好吧，实际上它适用于

:valid

和

:invalid

，但我们可以为此更改 CSS，并切换类。

user-interacted

仅在用户交互时检查有效性。

所以有两件事：

setCustomValidity

，并添加

.user-interacted

。

textarea.addEventListener("input", function(ev) {
  checkOnServer(this)
})


function checkOnServer(elem) {

  setTimeout(function() {
    elem.classList.add("user-interacted")
    var value = elem.value
    if (value.length > 3) {
      elem.setCustomValidity('')
    } else {
      elem.setCustomValidity('Length must be longer than 3 chars')
    }
  }, 100)

}

textarea.check_valid.user-interacted:invalid {
  border: 4px dotted red;
}

textarea.check_valid.user-interacted:valid {
  border: 4px solid green;
}

textarea {
  outline: none;
}

<p>let's assume valid is > 3 chars</p>
<textarea id="textarea" class="check_valid" cols="80" rows="5"></textarea>