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”＆lt; “b”等转换为整数值。
~~是将字符串更快地转换为整数的快捷方式。如果您愿意，也可以使用parseInt()（指定基数为10）。
我必须根据生成元素的最佳猜测来模拟HTML。
第一个示例可以使用$(this).val()代替$('#newMonoReading').val()，因为这是当前的此元素。
忽略关于不使用 DOM就绪处理程序的任何评论，因为这样会产生零差异，这是一种很好的做法。

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>

在文本框中输入任何内容之前，将显示验证错误消息

2 个答案: