複数の正規表現を使用した入力検証

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に反復します。私はこれを行うよりエレガントでより良い方法があることを知りたいですか？

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

Answer 1

あなたはbackgroundプロパティのスタイルをcss:invalidを使用し、<input>要素でpattern属性の値としてRegExpを設定することができます：あなたは1にそれらを組み合わせて、あなたの正規表現で（|）を使用するか、でき

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 2

要素の;私ならば、他の要素cssで.value.length === 0または: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>