javascript - 在文本框中输入任何内容之前会出现验证错误消息

Question

我正在尝试使用 jQuery 添加一些验证。我有一个现有的号码，当用户输入新号码时，它必须大于现有的号码。

这是我的代码，但它给出了错误消息。

我现有的number.MonoReading:

<div>
  @Html.LabelFor(m => m.MonoReading)
  @Html.TextBoxFor(m => m.MonoReading, new {@id="InitialMonoReading", @class = "form", @readonly = "readonly" })
  @Html.ValidationMessageFor(m => m.MonoReading)
</div>

这是我将在其中输入新数据的文本框。 MonoReading2(必须大于MonoReading):

<div>
  @Html.LabelFor(m => m.MonoReading2)
  @Html.TextBoxFor(m => m.MonoReading2, new { @id="newMonoReading", @class = "form-add" })
  <div id="MonoErrorMessage"></div>
  @*@Html.ValidationMessageFor(m => m.MonoReading2, new { @id="MonoErrorMessage" })*@
</div>

我已经尝试过这一点，这就是我到目前为止所做的:

<script type="text/javascript">
  $(document).ready(function () {
    $("#newMonoReading").focus(function () {
      var str = "";

      var initialMonoReading = $('#InitialMonoReading').val();
      var newMonoReading = $('#newMonoReading').val()
      if(newMonoReading < initialMonoReading){
        $('#MonoErrorMessage').text("New Readings must be less than existing");
      }
      else{
        $('#MonoErrorMessage').text("");
      }
    })
      .change();
  });
</script>

问题是它根本没有效果。它有效，但非常不整洁。当我单击文本框时，即使我没有输入任何内容，它也会立即出现。它也没有那么快。

还有其他方法可以做到这一点吗？

Answer 1

由于您只关心何时完成编辑值，因此可以使用 jQuery focusout 事件。这往往比标准的模糊事件更可靠。如果频繁触发，对change进行验证可能会让用户感到恼火:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/ddc1jgp2/5/

$(function () {
    $("#newMonoReading").on('focusout', function () {
        var str = "";

        var initialMonoReading = $('#InitialMonoReading').val();
        var newMonoReading = $('#newMonoReading').val()
        if (~~newMonoReading < ~~initialMonoReading) {
            $('#MonoErrorMessage').text("New Readings must be less than existing");
            $('#MonoErrorMessage').show();
        } else {
            $('#MonoErrorMessage').hide();
        }
    });
});

您可能实际上想要在输入更改时进行检查，并且 focusout 支持父元素，因此如果您希望输入更改为验证:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/ddc1jgp2/6/

$(function () {
    $("#parent").on('focusout', function () {
        var str = "";
        var initialMonoReading = $('#InitialMonoReading').val();
        var newMonoReading = $('#newMonoReading').val()
        if (~~newMonoReading < ~~initialMonoReading) {
            $('#MonoErrorMessage').text("New Readings must be less than existing");
            $('#MonoErrorMessage').show();
        } else {
            $('#MonoErrorMessage').hide();
        }
    });
});

注释:

• 您正在比较字符串的排序规则“a”<“b”等。转换为整数值。
• ~~ 是将字符串更快转换为整数的快捷方式。如果您愿意，也可以使用 parseInt()(指定基数 10)。
• 我必须根据对生成元素的最佳猜测来模拟 HTML。
• 第一个示例可以仅使用 $(this).val() 而不是 $('#newMonoReading').val() 因为这是当前的 < em>这个元素。
• 忽略任何关于不使用 DOM 就绪处理程序的评论，因为这将带来零差异，并且是一个很好的做法。