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

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 事件。这往往比标准的blur 事件更可靠。如果过于频繁地在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”
• ~~ 是将字符串更快地转换为整数的快捷方式。如果您愿意，也可以使用parseInt()（指定基数为 10）。
• 我必须根据对生成元素的最佳猜测来模拟 HTML。
• 第一个示例可以只使用$(this).val() 而不是$('#newMonoReading').val()，因为那是当前的this 元素。
• 忽略任何关于不使用 DOM 就绪处理程序的 cmets，因为这将产生零差异，是一种很好的做法。

Answer 2

不要使用 onFocus 事件。当页面加载时，它会立即触发。您应该改为使用 onChange 事件，以便仅在用户键入时触发它...

<script type="text/javascript">
    $("#newMonoReading").change(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();
        }
    });
</script>