2016-08-10 10 views
5

Chcę sprawdzić dane wejściowe html, które działa na wszystkich platformach, np. Chrome, Internet Explorer, Mozilla, Firefox, Safari & Opera na PC, a także iOS i Android.Sprawdzanie poprawności wejścia za pomocą języka JavaScript przy użyciu javascript

Chcę ograniczyć wprowadzanie liczb do określonego zakresu np. (Od 1 do 59). Mam również inny element wejściowy w tej samej formie. Chcę również sprawdzić, czy Input 1 < Input 2, w przeciwnym razie dać komunikat o błędzie. Proszę pomóż.

Próbowałem następujące dwie opcje, które nie działa na wszystkich platformach:

<td align="center"><input id="SH1" name="sh1" type="number" min="1" max="59" align="center" /></td> 
<td align="center"><input id="SM1" name="sm1" type="text" maxlength="2" onkeypress='return event.charCode >= 48 && event.charCode <= 57' /></td> 
+1

Na której przeglądarce powyższy kod nie działa? –

+0

Myślę, że najnowsze wersje firefox i google chrome nie obsługują atrybutów min max. Używa JavaScript lub Jquery zamiast –

+0

Gdzie jest twój JavaScript? Musisz pokazać nam, co wypróbowałeś do tej pory. – Shaggy

Odpowiedz

0

do kompatybilnych z prawie każdej przeglądarce, używać ojczystego języka JavaScript. Prosty przykład twojego wymagania jest następujący.

<script language="javascript"> 
    function validate() { 
    var val1 = parseInt(document.getElementById('val1').value); 
    var val2 = parseInt(document.getElementById('val2').value); 

    minMaxRange(val1, val2); 
    comparison(val1, val2); 
    } 

    function minMaxRange(value1, value2) { 
    if (value1 < 1 || value2 < 1) { 
     alert("Minimum value should be 1"); 
    } 

    if (value1 > 59 || value2 > 59) { 
     alert("Maximum value should be 59"); 
    } 
    } 

    function comparison(value1, value2) { 
    if (value1 > value2) { 
     alert("Value2 should be greater than Value1"); 
    } 
    } 

</script> 

<body> 
    <p><span>Value 1 : </span> 
    <input type="text" id="val1"> 
    </p> 
    <p><span>Value 2 : </span> 
    <input type="text" id="val2"> 
    </p> 
    <p> 
    <input type="button" value="Validate" onClick="validate()"> 
    </p> 
</body> 
0

Ok, powiedzmy, że istnieją dwa wejścia, jak postępować

<input id="input1" type="number"> 
<input type="input2" type="number"> 

Teraz JS (jQuery)

if($("#input1").val()<1 || $("#input1").val()>59) 
    alert("Error"); 

if($("#input1").val() < $("#input2").val()) 
    alert("Error"); 

Pamiętaj, aby podać biblioteki jQuery przed tym kodem.

Teraz, jeśli chcesz to sprawdzić podczas wprowadzania, wykonaj następujące czynności;

$("[id^=input]").keyUp(function(){ 

    if($("#input1").val()<1 || $("#input1").val()>59) 
     alert("Error"); 

    if($("#input1").val() < $("#input2").val()) 
     alert("Error"); 
}) 
Powiązane problemy