执行客户端验证

Question

我想知道根据放置在 ViewModel 字段上的属性来处理客户端、javascript 或 jQuery 驱动的 MVC4 字段验证的最佳方法是什么。

这里是例子

    [Required]
     public string Username { get; set; }

     [Required]
     public string Email { get; set; }

    <div>
        @Html.LabelFor(m=>m.Username)
        @Html.ValidationMessageFor(m => m.Username)
    </div>

    <div>
        @Html.LabelFor(m=>m.Email)
        @Html.ValidationMessageFor(m => m.Email)
    </div>

目前，如果我在表单中输入无效的电子邮件地址、空的用户名等并点击提交，我会正确地收到错误通知。它按预期工作

我希望每次用户在文本框和按键上失去焦点时，都必须对该字段进行验证。

我通过将其添加到每个页面来解决此问题..

<script>
    $("input").blur(function () {
        $(this).valid();
    });
    $("input").keydown(function () {
        $(this).valid();
    });
</script>

编写硬编码的 jQuery 片段并不是最好的选择。我想要一种数据驱动的方法，可能嵌入在 MVC4 中，或者是否有办法配置 jquery.validate.unobtrusive 来执行此验证。

等待回复，

谢谢- 阿图尔

Answer 1

尝试在您的页面上放置 jquery.validate 和 jquery.validate.unobtrusive 脚本

<script src="@Url.Content("~/Scripts/jquery-1.6.1.min.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" 
type="text/javascript"></script>

并调用

@{Html.EnableClientValidation();}
@{Html.EnableUnobtrusiveJavaScript();}

或在 web.config 中设置下一个设置：

<appSettings>
  <add key="ClientValidationEnabled" value="true"/>
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

查看这里了解更多信息：Unobtrusive Client Validation in ASP.NET MVC 3

编辑：

jQuery 验证在第一次提交表单后发挥作用，看看 onfocusout 和 onkeyup 的源代码：

onfocusout: function( element, event ) {
            if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
                this.element(element);
            }
        },
onkeyup: function( element, event ) {
            if ( event.which === 9 && this.elementValue(element) === "" ) {
                return;
            } else if ( element.name in this.submitted || element === this.lastElement ) {
                this.element(element);
            }
        },

如果您需要对 blur 和 keydown 进行强制验证，您可以尝试覆盖这些函数的默认定义。尝试使用验证器对象（它是验证的所有元数据，使我们能够在页面周期的任何时候访问验证选项）。下面的代码演示了它：

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
    $(function () {
        //this function will be called after validation has triggered
        function isValid(element) {
            this.element(element);
        }
        //get current form validator (here could be other selector that corresponds to your form)
        var validator = $('form').data('validator');
        validator.settings.onfocusout = isValid;
        validator.settings.onkeyup = isValid;
    });
</script>