keyup函数验证不起作用

i tried every possibilities but not getting the correct result. it works fine for two digit value, but it should work for any given value. here is my code please check it and suggest me.

我尝试了各种可能性，但没有得到正确的结果。它适用于两位数值，但它应该适用于任何给定的值。这是我的代码请检查并建议我。

$(document).ready(function () {
			
			$("#height").keyup(function(){
				  var weight=$('#weight').val();
				  var height=$('#height').val();

				  if(weight>height){
					  alert("Height should be greater than Weight");
				  }
			});
});

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
  <label>WEIGHT(kg)</label><input type="text" id="weight"       
      name="weight" placeholder="weight"><br/><br/>
	<label>HEIGHT(cm)</label><input type="text" id="height"   
      name="height" placeholder="height">

</body>
</html>

i need to display an alert when the weight is greater than height.

我需要在重量大于高度时显示警报。

4 个解决方案

#1

Seems like you are comparing the text values instead of the integer values.

您似乎正在比较文本值而不是整数值。

Convert them to integers before comparing and it should work.

在比较之前将它们转换为整数，它应该可以工作。

var weight=parseInt($('#weight').val());
var height=parseInt($('#height').val());

String comparison works differently than integer comparison, for example in JavaScript

字符串比较与整数比较的工作方式不同，例如在JavaScript中

"200" > "1999" // true
200 > 1999 // false

#2

This will work for you.

这对你有用。

I have used .blur function to achieve this result.Not used .keyup or .keydown function because it will effect on every key stock of the user, blur will only trigger on the focus out from the input.

我已经使用.blur函数来实现这个结果。没有使用.keyup或.keydown函数，因为它会影响用户的每个关键股票，模糊只会触发输入的焦点。

$(document).ready(function() {

  $("#height").blur(function() {
    var weight = $('#weight').val();
    var height = $(this).val();

    if (weight > height) {
      alert("Height should be greater than Weight");
    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <label>WEIGHT(kg)</label><input type="text" id="weight" name="weight" placeholder="weight"><br/><br/>
  <label>HEIGHT(cm)</label><input type="text" id="height" name="height" placeholder="height">

</body>

</html>

#3

$(document).ready(function() {
  $("#height").blur(function() {
    compareHtWt();
  });
  $("#weight").blur(function() {
    compareHtWt();
  });
  function compareHtWt(){
    var weight = $('#weight').val();
    var height = $('#height').val();
    if (weight.length>0 && height.length>0 && weight > height) {
      alert("Height should be greater than Weight");
      return false;
    }
  }
});

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <label>WEIGHT(kg)</label>
  <input type="number" id="weight" name="weight" placeholder="weight"><br/><br/>
  <label>HEIGHT(cm)</label>
  <input type="number" id="height" name="height" placeholder="height">
</body>
</html>

#4

Try this:

尝试这个：

$(document).ready(function(){
  $('#weight, #height').on('keyup', function(){
    var weight = $('#weight');
    var height = $('#height');
    
    if(weight.val().length > 0 && height.val().length > 0){
      if(weight.val() > height.val()){
        alert("Height should be greater than Weight");
      }
    }
  });
});

  <label>WEIGHT(kg)</label><input type="text" id="weight"       
      name="weight" placeholder="weight"><br/><br/>
	<label>HEIGHT(cm)</label><input type="text" id="height"   
      name="height" placeholder="height">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

#1