Question

在 ASP.NET MVC 中，验证用户在文本框中键入的数据非常容易。通过添加以下行，我们从框架中询问当用户输入错误时显示错误消息。

@Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })

在我的应用程序中，我想要此功能，但我还想在用户输入 正确信息 时显示消息。是否有ValidationMessageFor之类的html帮助器会显示一条消息，通知用户输入的信息 是正确的 ？

Answer 1

如果您只有简单的客户端验证案例，则可以尝试更改 css 。 不显眼的验证库将valid 类设置为有效的字段。

所以你可以改变你的css：

input.valid, select.valid, textarea.valid{
   border-color: green;
}

只有在字段更改时发送 AJAX调用，才能获得需要服务器参与的更复杂的案例。

Answer 2

我找到了问题的答案。这不是最好的解决方案，但它有效。我打算在这里写，因为更多的人可能需要它。

我创建了一个计时器，每隔X毫秒检查模型的所有验证属性，如果指定属性的错误消息具有类'field-validation-valid'，则表示用户键入的属性为有效，所以我显示有效的错误消息。否则我把它隐藏起来。

在视图中，我添加了一个div，其中包含有效字段的消息，该消息的id等于ValidNameFor，后跟属性的名称。

@Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
<div id="ValidNameForSurname">This is correct</div>

javascript

$(document).ready(function () {
    setInterval(function ()
    {
        $(".form-control").each(function () {
            var confirmSpan = $("span[data-valmsg-for='" + $(this).attr('id') + "']");
            if (confirmSpan.hasClass("field-validation-valid")) 
                $("#ValidNameFor" + $(this).attr('id')).show();
            else
                $("#ValidNameFor" + $(this).attr('id')).hide();
        });
    }, 500);
});

删除计时器的一种方法是有一个jQuery事件，它会在一个元素添加或删除一个类时通知我。如果有这样的事件，我可以删除计时器，并在将类“field-validation-valid”添加到validated属性时显示或隐藏正确的文本。如果有人知道如何将这样的事件添加到元素中，那么很高兴知道。

Answer 3

您可以使用验证消息是否显示为一个条件，以onfocusout为基础显示您的确认作为触发器。所以给出一些像这样的HTML：

<form id="myFrm" action="/Account/Login?ReturnUrl=%2F" class="form-horizontal" method="post" role="form">            <h4>Use a local account to log in.</h4>
   <hr />
   <div class="form-group">
         <label class="col-md-2 control-label" for="Email">Email</label>
         <div class="col-md-10">
                <input class="form-control myFrmInputs" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
               <span id="confirmEmail" class="confirmationMessage">Correct</span>
         </div>
      </div>
      <div class="form-group">
         <label class="col-md-2 control-label" for="Password">Password</label>
         <div class="col-md-10">
            <input class="form-control myFrmInputs" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" />
            <span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
            <span id="confirmPassword" class="confirmationMessage">Correct</span>
         </div>
    </div>
</form>

有些CSS喜欢这样：

.confirmationMessage {
    display:none;
}

Javascript / jquery

  $( document ).ready(function() {
            $(".myFrmInputs").each(function() {            
                $(this).focusout(function() {
                   //var errorSpan = $("#myFrm span[data-valmsg-for='" + $(this).attr('id') + "']");
                   var errorSpan = $("#" + $(this).attr('id') + "-error");
                   if (errorSpan.length>0 && !$(errorSpan).is(":visible")) 
                   {
                       $("#confirm" + $(this).attr('id')).show();
                   }
                });    
            });
    });

您可以仅根据输入是否未被标记为无效来显示确认。这仅适用于文本输入，但您可以使用其他输入类型的方法。它几乎没有准备就绪，但它有效：http://jsfiddle.net/f55xsLjx/1/

正确的ASP.NET MVC客户端验证消息

3 个答案: