여러 정규식을 사용하여 입력 유효성 검사

Question

사용자가 숫자 연산자를 사용하여 숫자 필드를 입력 할 수있는 텍스트 필드가 있습니다. 다음은 유효한 입력에 대한 일련의 예제입니다.

1. > 3 
2. >= 3 
3. < 3 
4. <= 3 
5. <> 3 (NOT) 
6. 3 to 5 (RANGE) 
7. <> 3 to 5 (NOT RANGE) 

다음과 같은 논리가 있습니다. 각 regex을 반복하여 keyup에 있습니다. 이 일을 더 우아하고 더 좋은 방법으로 알고 싶습니다.

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"; 

    } 
} 

Answer 1

당신은 <input> 요소에 pattern 속성의 값으로 RegExp을 설정할 수 있습니다, 스타일 background 속성에 css:invalid를 사용 요소의; 요소 .value.length === 0 또는 css에서 :not(:focus)이 unset !important에 background를 설정하면 다른 성능이 경우에만 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>

Answer 2

당신이 사용하거나 (|를) 정규식에 하나로 결합 할 수 있습니다

var regex = /^(>=\d+|<=\d+|>\d+|<\d+|\d+|<> \d+|<> \d+ to \d+|\d+ to \d+)$/; 
var isValid = regex.test(x);