使用 JavaScript RegEx 验证输入答案

【问题标题】：Validating inputs using JavaScript RegEx使用 JavaScript RegEx 验证输入
【发布时间】：2021-01-12 07:34:55
【问题描述】：

我有这个 JS 函数来验证用户输入并确保它是 2000-2021 之间的一年，它工作得很好，问题是当我写无效输入时，它会将大纲更改为红色，但是当我写一个有效的输入它保持红色。即使我从一开始就写了有效的输入，它也会变红。

var  batchRegex=/^[2][0][0-2][0-1]$/;
function checkBatch(batch){
if (batch = ""){
  document.getElementById('batch').style.outlineColor = "red";
}
else if(!batchRegex.test(batch)){
  document.getElementById('batch').style.outlineColor = "red";
}
else if(batchRegex.test(batch)){
  document.getElementById('batch').style.outlineColor = "none";
}
}
<form method="post">
  <input type="text" maxlength="4" id="batch" name="batch" onkeyup="checkBatch(this.value)" required>
  <input type="submit" name="submit">
  </form>

【问题讨论】：

那个正则表达式在哪里？
尝试 onblur 事件
对不起，我忘了包括它，这里是var batchRegex=/^[2][0][0-2][0-1]$/;@MaheerAli
@herosuper 它根本不会改变颜色
@herosuper 我不确定，但在没有之前我尝试过绿色并且没有工作

标签： javascript regex validation dom

【解决方案1】：

您的代码中有多个问题：

if (batch = ""){ 应该是if (batch == ""){
正则表达式 /^[2][0][0-2][0-1]$/ 仅匹配值：

2000、2001、2010、2011、2020、2021

但您想匹配2000 和2021 之间的所有值。

为什么不试试这样简单的事情：

function checkBatch(batch){
  if (batch.value >= 2000 && batch.value <= 2021){
    batch.style.outlineColor = "green";
  } else {
    batch.style.outlineColor = "red";
  }
}

<form method="post">
  <input type="text" maxlength="4" id="batch" name="batch" onkeyup="checkBatch(this)" required>
  <input type="submit" name="submit">
  </form>

而不是通过 javascript 更改内联样式，只需添加一个类，然后您可以在其中使用 CSS 更改样式......

function checkBatch(batch){
  if (batch.value >= 2000 && batch.value <= 2021){
    batch.classList.remove('alert')
    batch.classList.add('success')
  } else {
    batch.classList.remove('success')
    batch.classList.add('alert')
  }
}

input.alert {
  outline-color: red;
}
input.success {
  outline-color: green;
}

<form method="post">
  <input type="text" maxlength="4" id="batch" name="batch" onkeyup="checkBatch(this)" required>
  <input type="submit" name="submit">
  </form>

【讨论】：

【解决方案2】：

不要使用 JS 来更改输入的样式，使用 HTML5 和 CSS 中提供的内置输入验证。使用 CSS 自动处理和更新样式。

如果您使用数字输入，则可以放置最小值和最大值

<input type="number" min=2000 max=2021 name="numyr" required >

然后您可以使用 :invalid 伪元素来使用 css。

input:invalid {
  outline: 2px solid pink;
}

如果您坚持在输入值上使用正则表达式，那么您可以使用 pattern 属性

<input type="text" pattern="^[2][0][0-2][0-1]$" >

仍然可以在使用表单提交事件提交之前进行进一步验证。

var  batchRegex=/^[2][0][0-2][0-1]$/;
function checkBatch(batch){
if (batch = ""){
  document.getElementById('batch').style.outlineColor = "red";
}
else if(!batchRegex.test(batch)){
  document.getElementById('batch').style.outlineColor = "red";
}
else if(batchRegex.test(batch)){
  document.getElementById('batch').style.outlineColor = "none";
}
}

input{
  min-width: 100px;
  display: block;
  margin: 5px;
}
input:invalid {
  outline: 2px solid pink;
}

<form method="post">
  <input type="text" maxlength="4" id="batch" name="batch" onkeyup="checkBatch(this.value)" required>

  <input type="number" min=2000 max=2021 name="numyr" required >
 
  <input type="text" pattern="^[2][0][0-2][0-1]$" required >
  
  <input type="submit" name="submit">
  </form>

【讨论】：