使用多重正则表达式进行输入验证

Input Validation using Multiple Regex

本文关键字：输入 验证 正则表达式      更新时间：2023-09-26

我有一个文本字段，用户可以在其中输入使用数值运算符的数值字段。下面是有效输入

的一组示例
1. > 3
2. >= 3
3. < 3
4. <= 3
5. <> 3 (NOT)
6. 3 to 5 (RANGE)
7. <> 3 to 5 (NOT RANGE)

我有下面的逻辑工作。我在keyup上遍历每个regex。我想知道有没有更优雅更好的方法?

function myFunction() {
    var x, text;
    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;
    var arrRegex = new Array("^>=''d+$", "^<=''d+$", "^>''d+$", "^<''d+$", "^''d+$", "^<> ''d+$", "^<> ''d+ to ''d+$", "^''d+ to ''d+$");
    c = false;
    for (i = 0; i < arrRegex.length; i++) {
        var regex = new RegExp(arrRegex[i]);
        if (regex.test(x)) {
            c = true;
        }
    }
    if (c == true) {
        document.getElementById("numb").style.backgroundColor = "green";
    } else {
        document.getElementById("numb").style.backgroundColor = "red";
    }
}

可以在<input>元素上设置RegExp为pattern属性的值，使用css :invalid为元素的background属性设置样式;如果元素.value.length === 0或:not(:focus)在css，则将className设置为input, focus事件，将background设置为unset !important，否则删除className以仅应用css :valid, :invalid样式

input:invalid {
  background: red;
}
input:valid {
  background: green;
}
input:not(:focus), .clear {
  background: unset !important;
}
<input pattern="^(|>='d+$|<='d+$|>'d+$|<'d+$|'d+$|<> 'd+$|<> 'd+ to 'd+$|'d+ to 'd+)$">
<script>
  var input = document.querySelector("input[pattern]")
  input.onfocus = input.oninput = function() {
    this.classList.toggle("clear", this.value.length === 0)
  }
</script>

您可以在regex中使用or (|)将它们合并为一个:

var regex = /^(>='d+|<='d+|>'d+|<'d+|'d+|<> 'd+|<> 'd+ to 'd+|'d+ to 'd+)$/;
var isValid = regex.test(x);
相关文章：