代码之家 › 专栏 › 技术社区 › CyclingFreak

ASP.NET MVC 3-自定义客户端验证不起作用

unobtrusive-validation jquery-validate data-annotations asp.net-mvc-3

CyclingFreak · 技术社区 · 12 年前

我正在尝试实现自定义客户端验证,但它不起作用。我是以Codeproject上的文章为基础的 http://www.codeproject.com/Articles/275056/Custom-Client-Side-Validation-in-ASP-NET-MVC3

我也看了SO,但我认为我以正确的方式实现了它,但我忽略了一些东西。我的目标是验证一个日期(必填,日期格式,并且不早于表单上的另一个日期)。前两个可以通过数据注释完成,最后一个必须通过自定义验证完成。

我在基类上有一些数据注释(ClassLibrary在VB.NET中):

Imports System.ComponentModel
Imports System.ComponentModel.DataAnnotations

<MetadataType(GetType(CM_CONTRACTVALIDATIONData))>
Partial Public Class CM_CONTRACTACTIVATION
    '...
End Class

Public Class CM_CONTRACTVALIDATIONdata
'...
<DataType(DataType.Date)>
<Required()>
Public Property TakeBackDeviceWhen
'..
End Class

在javascript文件中,我添加了自定义方法:

//validation
$.validator.addMethod("checkPickupDate", function (value, element) {
    return false;
});
$("#form").validate({
    rules: {
        TakeBackDeviceWhen: {
            checkPickupDate: true
        }
    },
    messages: {
        TakeBackDeviceWhen: {
            checkPickupDate: "Test"
        }
    }
}
);

我的chtml文件如下:

@Html.TextBox("TakeBackDeviceWhen", Model.TakeBackDeviceWhen.HasValue ? Model.TakeBackDeviceWhen.Value.ToShortDateString() : "", new { style = "Width: 200px" })

生成的HTML如下所示:

<input id="TakeBackDeviceWhen" class="hasDatepicker" type="text" value="" style="Width: 200px" name="TakeBackDeviceWhen" data-val-required="The TakeBackDeviceWhen field is required." data-val="true">

我的类型验证和自定义验证似乎都没有实现。

出了什么问题?

1 回复 | 直到 12 年前

Community 7 年前

好的,解决了。我希望:-)

我今天学到了什么: (1) 不要使用EditorFor:当你从MVC模板构建它时,输入字段会生成到EditorFor,看起来你不能添加自定义的不引人注目的验证标记。所以,我一直试图解决这个问题,直到我把它改为TextBoxFor。

(2) 您可以在jQuery中添加自定义验证方法,但不能将它们与不引人注目的验证混合使用。添加自定义方法后,还必须将其添加到不引人注目的适配器中。别忘了在底部添加jQuery:-s(我从 jQuery.validator.unobtrusive.adapters.addMinMax round trips, doesn't work in MVC3 )

$(function () {
$.validator.addMethod("checkpickupdate", function (value, element) {
    if (value == "20/09/2012") {
        return false;
    } else {
        return true;
    }
});

$.validator.unobtrusive.adapters.addBool("checkpickupdate");
} (jQuery));

(3) 将验证标记添加到htmlAttributes中的输入字段:

@Html.TextBox("TakeBackDeviceWhen", Model.TakeBackDeviceWhen.HasValue ? Model.TakeBackDeviceWhen.Value.ToShortDateString() : "",
                new { 
                    style = "Width: 200px", 
                    data_val = "true", 
                    data_val_required = "verplicht!",
                    data_val_date = "moet datum zijn",
                    data_val_checkpickupdate = "wow"
                 })

(4) 数据类型数据注释不会强制进行验证。你必须像(3)中那样添加它。您可以添加自定义ValidationAttribute,如(用于服务器端验证):

public class MustBeDateAttribute : ValidationAttribute {
    public override bool IsValid(object value) {
        try
        {
            DateTime dte = DateTime.Parse(value.ToString());
            return true;
        }
        catch (Exception)
        {
            return false;
            throw;
        }
    }
}

这是产生的html输出:

<input type="text" value="" style="Width: 200px" name="TakeBackDeviceWhen" id="TakeBackDeviceWhen" data-val-required="required!" data-val-date="has to be a date" data-val-checkpickupdate="custom error" data-val="true" class="hasDatepicker valid">

由于我在不同的项目中使用我的类库,我现在将尝试从类库中分离数据注释元数据(可能使用依赖解析程序)。