Question

我有两个输入字段，想检查一个字段是否大于另一个字段。我想在点击提交按钮之前检查这个。

<input type="text" name = "minValue" pattern="(|-)?[0-9]{0,3}?" id="min_value" value="" required/>

<input type="text" name = "maxValue" pattern="(|-)?[0-9]{0,3}?" id="max_value" value="" required/>


<button type = "submit" name = "submitcheck" id = "submit_check"> Let´s Go </button>

我需要jquery吗？我想在检查submt按钮之前进行此检查。

Answer 1

尝试在代码中添加一些JavaScript！也许是这样的：

<input type="text" name = "minValue" pattern="(|-)?[0-9]{0,3}?" id="min_value" value="" required/>

<input type="text" name = "maxValue" pattern="(|-)?[0-9]{0,3}?" id="max_value" value="" required/>


<button type = "submit" name = "submitcheck" id = "submit_check"> Let´s Go </button>
<div id=log><div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('#submit_check').on('submit', function(e){

    if( parseInt($("#min_value").val()) > parseInt($("#max_value").val()) ){

        document.getElementById('log').innerHTML = "min is larger than max";

    }else{

        document.getElementById('log').innerHTML = "max is larger than min";

    });
    });

</script>

Answer 2

请尝试以下操作，检查first input的值是否大于second or not，但在点击blur event Listener之前使用submit button。

var frst = document.querySelector("#min_value");
var secnd = document.querySelector("#max_value");
var para = document.createElement("p");
function blr(){
  var ab = frst.value;
  var vc = secnd.value;
  if(ab == "" && vc == ""){
  para.textContent = "Please enter value in both.";
  document.body.appendChild(para);
  }
  else if(ab >= vc){
  para.textContent = "Value present in first input is greater then second.";
  document.body.appendChild(para);
  }
  else if(vc >= ab){
    para.textContent = "Value present in Second input is greater then First.";
  document.body.appendChild(para);
  }
}
secnd.addEventListener("blur",blr);

<input type="text" name = "minValue" pattern="(|-)?[0-9]{0,3}?" id="min_value" value="" required/>

<input type="text" name = "maxValue" pattern="(|-)?[0-9]{0,3}?" id="max_value" value="" required/>


<button type = "submit" name = "submitcheck" id = "submit_check"> Let´s Go </button>

Answer 3

HTML只是一种标记语言。如果您希望您的网络具有某些功能，则必须使用JavaScript Jquery或Php。

您可以尝试这样的事情：

Ust <form>标记属性onsubmit：

<form name="myForm" onsubmit="return validateForm()" method="post">

Answer 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<form onsubmit="return validate();">
    <input type="text" name = "minValue" pattern="(|-)?[0-9]{0,3}?" id="min_value" value="" required/>

    <input type="text" name = "maxValue" pattern="(|-)?[0-9]{0,3}?" id="max_value" value="" required/>

    <button type = "submit" name = "submitcheck" id = "submit_check"> Let´s Go </button>

</form>

<script>
function validate() {
if ($("#min_value").val() > $("#max_value").val()) {
    
    alert("min_value field > max_value");
} else {
    alert("max_value field > min_value");
}
}
</script>

Answer 5

你也可以尝试他的

<强> HTML

<input type="text" name = "minValue" pattern="(|-)?[0-9]{0,3}?" id="min_value" value="" required/>

<input type="text" name = "maxValue" pattern="(|-)?[0-9]{0,3}?" id="max_value" value="" required/>

<button type = "submit" name = "submitcheck" id = "submit_check" onclick="return validate();"> Let´s Go </button>

<强>脚本

function validate(){
     var max = parseInt(document.getElementById('max_value').value);
     var min = parseInt(document.getElementById('min_value').value);
     if(min > max){
         alert('Minvalue is greter than Maxvalue');
          return false;
     }else{
           alert('Maxvalue is greter than Minvalue');
          return false;
     }

}

谢谢，

html检查提交后输入是否大于其他输入

5 个答案: