使用 JavaScript 或 jQuery 进行价格范围验证

price range validation using javascript or jquery

本文关键字：范围 验证 JavaScript jQuery 使用      更新时间：2023-09-26
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>    
<form method="post" action="form.php">
   Price : From
    <input type="text" id="price-from"> 
   To: 
    <input type="text" id="price-to">
    <input type="submit">
</form>    
</body>
</html>

我想验证价格范围..价格从必须小于价格到。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form method="post" action="form.php" onsubmit="return validate()">
Price : From
<input type="text" id="price-from"> 
To: 
<input type="text" id="price-to">
<input type="submit">
</form>
</body>
<script>
    var validate=function(){
            var from=document.getElementById("price-from").value;
            var to=document.getElementById("price-to").value;
            if(from<to)
                return true;
            alert("from>=to");
            return false;
        }
</script>
</html>

在提交时调用此方法

function validatePrices()
{
  var priceFrom = parseFloat( $( "#price-from" ).val() );
  var priceTo = parseFloat( $( "#price-to" ).val() );
  if ( !isNaN( priceFrom )  && !isNaN( priceTo)  )
  {
    if ( priceFrom >= priceTo )//if greater than or equal to then show error alert
    {
       alert( "price from should be less than price to" );
       return false;
    }
  }
  else
  {
       alert( "price from and price to should be valid numbers " );
       return false;
  }
}

你可能想给你的提交按钮一个 ID。

$(functoin() {
      var fromPrice = $("#price-from").val();
      var toPrice = $("#price-to").val();
      if (fromPrice != "" && toPrice != "") {
        if (parseFloat(toPrice) > parseFloat(fromPrice) {
            $("#frmPrice").submit()
          }
      });
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <form method="post" action="form.php" id='frmPrice'>
    Price : From
    <input type="text" id="price-from">To:
    <input type="text" id="price-to">
    <input type="submit" id="btnSubmit">
  </form>
</body>
</html>

相关文章：