使用javascript的HTML輸入驗證

我想驗證可在所有平臺上使用的html輸入，例如Chrome，Internet Explorer，Mozilla，Firefox，Safari &適用於PC以及iOS和Android的Opera。使用javascript的HTML輸入驗證

我想限制輸入爲例如（1至59）的特定範圍之間的數字。另外我有另一個輸入元素在相同的形式。我也想檢查輸入1 <輸入2，否則給出錯誤信息。請幫忙。

我已經試過這不是在所有的平臺上工作的以下兩個選項：幾乎每一個瀏覽器

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

來源

2016-08-10 hs7624

在哪個瀏覽器上面的代碼不工作？ –

我認爲最新版本的Firefox和谷歌瀏覽器不支持最小最大屬性。使用Javascript或Jquery代替 –

您的JavaScript在哪裏？你需要向我們展示你到目前爲止所嘗試過的。 – Shaggy

兼容，使用原生的JavaScript。下面是一個簡單的例子。

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

來源

2016-09-15 11:21:07

好吧，讓我們說，有兩個輸入如下

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

現在JS：（使用jQuery）

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

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

記住此代碼之前包括jQuery庫。

現在如果你想在輸入過程中檢查它，請執行以下操作;

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

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

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

來源

2016-09-15 11:31:09

使用javascript的HTML輸入驗證

回答

相關問題