2016-08-10 146 views
5

我想验证可在所有平台上使用的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> 
+1

在哪个浏览器上面的代码不工作? –

+0

我认为最新版本的Firefox和谷歌浏览器不支持最小最大属性。使用Javascript或Jquery代替 –

+0

您的JavaScript在哪里?你需要向我们展示你到目前为止所尝试过的。 – Shaggy

回答

0

兼容,使用原生的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> 
0

好吧,让我们说,有两个输入如下

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