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>

目前，如果我在表单中输入了一个无效的电子邮件地址，一个空的UserName等，并点击提交我已正确通知错误。它按预期工作

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

我通过将此问题添加到每个页面来修复此问题..

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

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

等待回复，

Thanks- 阿图尔

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验证在第一个表单submition之后扮演它的角色，看一下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);
            }
        },

如果您需要强制模糊和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>

执行客户端验证

1 个答案: