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

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，但在点击submit button之前使用blur event Listener。

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

}

谢谢，