Formularvalidierung für eine bestimmte numerische Eingabe (numerischer Bereich + Nummer 0)

Question

Ich muss einen Eingang validieren, bei dem der numerische Eingabewert von 110 bis 150 ODER könnte Null sein könnte.

Gibt es eine Chance, ich kann es mit HTML5-Validierung, die ich derzeit für die anderen Eingaben verwende? Wenn nicht, was ist der beste Weg, um das zu erreichen?

Answer 1

Sie könnten etwas Ähnliches wie dies tun einige einfache javascript:

function verifyNumber(){ 
 
    const inputID = this.id; 
 
    const label = document.querySelector(`label[for="${inputID}"]`); 
 
    if ((this.value > 110 && this.value < 150) || (this.value == 0)){ 
 
    \t label.style = 'display: None'; 
 
    } else { 
 
    \t label.style = ''; 
 
    } 
 
} 
 

 
document.querySelector('input').addEventListener('change', verifyNumber);

input { 
 
    width: 100px; 
 
} 
 
label { 
 
    color: red; 
 
}

<input id="myInput" type="number" name="quantity"> 
 
<label style="display: None;" for="myInput">Please select a number between 110 and 150 or input 0</label>