Question

我有两个文本框。

一个文本框是min，其他文本框是max。

我想确保用户在最小文本框中输入一个比最小文本框更大的值。如果用户输入一个文本框即将进入下一个文本框，也可以处理该情况。如何我能否有效地完成这项工作。

Answer 1

最简单的方法是将值赋给变量并测试它们：

function checker(){

var min = document.getElementById("min").value ;

var max = document.getElementById("max").value ;

  if(min > max){

    alert('min is more than max');

  }

}

然后在输入上为onchange添加检查器：

<input type='text' id='min' onchange='checker();' />
<input type='text' id='max' onchange='checker();' />

Answer 2

首先，您需要将两个文本框元素存储在变量中，以便以后可以访问它们的值：

var min = document.getElementById('min'),
    max = document.getElementById('max');

然后，您需要一个功能来验证这两个框。除非两个框都包含一个值，否则不应运行此函数（以避免您提到用户尚未在两个框中填充的情况）。

function validate() {
    if (!min.value || !max.value) {
        return;
    }
    // ... do the validation
}

对于函数内部的实际验证，您需要在输入框和parse for numeric values中获取文本字符串。获得这两个数字后，您可以比较它们的值，并在出现问题时提醒用户：

function validate() {
    var minValue, maxValue;

    if (!min.value || !max.value) {
        return;
    }

    minValue = parseFloat(min.value);
    maxValue = parseFloat(max.value);

    if (minValue >= maxValue) {
        alert('Min Value must be smaller than Max Value!');
    }
}

最后要做的是决定何时运行此功能。当任何一个文本框失去焦点（onblur）时，你可能希望它运行。

min.onblur = validate;
max.onblur = validate;

有关完整的工作示例，请参阅this fiddle。

Answer 3

http://jsfiddle.net/kYXsU/

当用户离开最小文本框时将调用该函数...如果min的值大于max，则会出现弹出窗口。（您不必使用弹出窗口，但这取决于您）。

<html>
 <head>
    <title>Hey</title>
 </head>
<body>
    <label for="max">Max</label>
    <input id="max" />
     <label for="max">Min</label>
    <input id="min" />
    <body>
 </html>

//使用Jquery

$('#min').blur(function() {
  if ($('#min').val() > $('#max').val())
  {
    alert('Min cannot be bigger than max');
  }
  });

Javascript验证两个文本框

3 个答案: