keyup函数验证不起作用

时间:2017-10-28 05:36:41

标签: javascript jquery

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



$(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>
&#13;
&#13;
&#13;

我需要在体重大于身高时显示警告。

4 个答案:

答案 0 :(得分:2)

好像你正在比较文本值而不是整数值。

在比较之前将它们转换为整数,它应该有效。

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

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

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

答案 1 :(得分:1)

这对您有用。

我已使用.blur函数来实现此结果。未使用.keyup.keydown函数,因为它会影响用户的每个关键股票,blur只会从输入触发焦点。

$(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>

答案 2 :(得分:1)

$(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>

答案 3 :(得分:0)

试试这个:

&#13;
&#13;
$(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");
      }
    }
  });
});
&#13;
  <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>
&#13;
&#13;
&#13;