logo标签列表

使用Javascript进行HTML输入验证

javascripthtml
5
我希望验证适用于所有平台的html输入，包括PC上的Chrome、Internet Explorer、Mozilla、Firefox、Safari和Opera以及iOS和Android。我希望将输入限制为特定范围内的数字，例如（1至59）。同时，表单中还有另一个输入元素。我希望检查Input 1
我尝试了以下两个选项，但并不适用于所有平台：
 <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
以上代码在哪个浏览器上无法运行？ - bhanu.cs
我认为最新版本的Firefox和Google Chrome不支持min max属性。请改用JavaScript或JQuery。 - bhanu.cs
你的 JavaScript 代码在哪里？你需要展示一下你到目前为止所尝试过的。 - Shaggy
2个回答
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");
})
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接