Question

我为我的搜索面板添加了年龄范围，其中AGE_FROM的输入不应大于AGE_TO。 AGE_TO也不应该等于0，因为如果我只输入AGE_FROM，那么确切的年龄应该显示（只是为了清楚）

这是我的javascript文件。它不起作用，我很难弄清楚如何使其工作或如何触发它：

<script type="text/javascript">
    $(document).ready(function () {
    });

    $('#btnAdvanceSearch').click(function () {
        var age_from = document.getElementById('txtAGE').value;
        var age_to = document.getElementById('txtTO').value;

        if (age_from > age_to && age_to !== "") {
            alert('Invalid Age range!');
        }

    }
      )
</script>

我会感激任何帮助。先感谢您。我的搜索按钮的ID是btnAdvanceSearch

Answer 1

通过在前面添加int将输入值转换为+。您也可以将输入type="number"设置为仅允许数字。

$(function(){
  $('#btnAdvanceSearch').click(function () {
     var age_from = +$('#txtAGE').val();
     var age_to = +$('#txtTO').val();
          
     if (age_from > age_to && age)
        alert('Invalid Age range!');                 
  })    
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type='number' id='txtAGE' placeholder='FROM'/>
<input type='number' id='txtTO' placeholder='TO'/>
<input type='button' id='btnAdvanceSearch' value='Search'/>

Answer 2

您需要将输入解析为整数。 d ocument.getElementById（＆＃39; txtAGE＆＃39;）。返回字符串的值，因此您需要将其转换为整数。

＆＃13;

{"_id": {"questionId":"ObjectId(59cb7b85c854036fec173267)", "userQuestionAnswerDetails":[1,2]},"num_tutorial":1}
 {"_id":{"questionId":"ObjectId(59cb7b85c854036fec173267)", "userQuestionAnswerDetails":[1]},"num_tutorial":1}
{"_id":{"questionId":"ObjectId(59cb7b85c854036fec173267)", "userQuestionAnswerDetails":[2]},"num_tutorial":2}

＆＃13;

$('#btnAdvanceSearch').click(function () {
    var age_from = parseInt(document.getElementById('txtAGE').value);
    var age_to = parseInt(document.getElementById('txtTO').value);

    if (age_from > age_to && age_to !== "") {
        alert('Invalid Age range!');
    }

});

＆＃13;

Answer 3

我的2美分：

function getAgeRange(from, to) {
  function constructRange(from, to) {
    if (!from || from < 1) {
      return null
    }
  
    if (to === '' || from === to) {
      return [from, from]
    }
  
    if (from > to) {
      return null
    }
  
    return [from, to]
  }
  
  var range = constructRange(from, to)
  
  if (range) {
    return range.map(function(x) {
      return parseInt(x)
    })
  }
  
  return range
}

jQuery(document).ready(function() {
  jQuery('#btnAdvanceSearch').click(function() {
    var from = jQuery('#txtAGE').val()
    var to = jQuery('#txtTO').val()
  	
    var range = getAgeRange(from, to)
    
    if (!range) {
      alert('Invalid Age range!')
      return false
    }
    
    if (range[0] == range[1]) {
      alert('Search exact age: ' + range[0])
      return true
    }
    
    alert('Search in age range: ' + range[0] + ' - ' + range[1])
    return true
  })
})

// quick tests
assert('Empty fields gives null', getAgeRange('', ''), null)
assert('Age can\'t be 0', getAgeRange('0', ''), null)
assert('Age can\'t be negative', getAgeRange('-1', ''), null)
assert('If only age given, return [age, age]', getAgeRange('1', ''), [1, 1])
assert('If age equals to, return [age, age]', getAgeRange('1', '1'), [1, 1])
assert('If to is greater than age, return [age, to]', getAgeRange('1', '2'), [1, 2])
assert('If age is greater than to, return null', getAgeRange('2', '1'), null)


function assert(message, x, y) {
  function equals(x, y) {
    if (y== null) {
      return x === y
    }
  
    return x.reduce(function(acc, value, key) {
      return value == y[key]
    }, false)
  }
  
  if (!equals(x, y)) {
    console.error('Failed: ' + message + '. Expected: ' + x + ' but got ' + y)
  }
  else {
    console.info('Success: ' + message)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="txtAGE" />
  <input type="number" id="txtTO" />
  <button id="btnAdvanceSearch">Search</button>

年龄范围验证

3 个答案: