asp.net – MVC3客户端验证不稳定/不一致

发布时间：2020-12-16 06:59:21 所属栏目：asp.Net 来源：网络整理

导读：服务器端验证工作得很好但客户端不能在某些字段上工作. 使用： "jquery-1.5.1.min.js" "modernizr-1.7.min.js" "jquery.validate.min.js" "jquery.validate.unobtrusive.min.js". HTML5语义标记 MVC3,Razor,Code First 类数据注释： using System.ComponentM

服务器端验证工作得很好但客户端不能在某些字段上工作.

使用：

"jquery-1.5.1.min.js"  
"modernizr-1.7.min.js"  
"jquery.validate.min.js"  
"jquery.validate.unobtrusive.min.js".

HTML5语义标记

MVC3,Razor,Code First

类数据注释：

using System.ComponentModel.DataAnnotations;

[Required,MaxLength(30,ErrorMessage = "First Name must be {1} characters or less")]
public string FirstName { get; set; }

[Range(20,50,ErrorMessage = "{0} must be between {1} and {2}")]
public double Waist { get; set; }

视图：

视图是强类型的.

@using (Html.BeginForm()) { @Html.ValidationSummary(true)

    <span class="editor-label">  First Name </span>

    <span class="editor-field">

    @Html.EditorFor(model => model.FirstName)

    @Html.ValidationMessageFor(model => model.FirstName)

    </span><br /><br />

    <span class="editor-label">@Html.LabelFor(model => model.Waist): 20 to 50</span>

    <span class="editor-field">

    @Html.EditorFor(model => model.Waist)

    @Html.ValidationMessageFor(model => model.Waist)

    </span><br /><br />

客户端验证适用于腰部但不适用于FirstName.服务器端适用于两者.

当我查看源代码时,Waist有一个data-val-range.

data-val-range =“腰围必须在20到50之间”

FirstName没有data-val-range.

任何帮助非常感谢.

谢谢,

乔

我正在使用IE9 64位.

经过进一步调查必需和字符串长度部分工作.我将Dataannotation属性更改为此.

[Required(ErrorMessage = "First Name is required")]       [StringLength(30,MinimumLength = 2,ErrorMessage = "First Name must be {2} to {1} characters")]     public string FirstName { get; set; }

现在,当我转到我的编辑视图并清除FirstName文本框和选项卡到下一个时,我没有得到验证错误.如果我然后输入一个字符,我得到StringLength消息,当我随后清除字段时,我得到Required消息.越来越近但它仍然无法正常工作.

当我使用StringLength时,data-val-length =被添加到源代码中

解决方法

MaxLength和MinLength不适用于客户端验证.您可以使用 StringLength代替：

[Required]
[StringLength(30,ErrorMessage = "First Name must be {1} characters or less")]
public string FirstName { get; set; }

如果要模拟MinLength属性,可以设置MinimumLength属性：

[Required]
[StringLength(30,MinimumLength = 10,ErrorMessage = "First Name must be between 10 and 30 characters")]
public string FirstName { get; set; }

更新：

即使表单未提交,您似乎也希望激动地触发验证.您可以添加以下脚本来实现：

<script type="text/javascript">
    $(function () {
        var settngs = $.data($('form')[0],'validator').settings;
        settngs.onfocusout = function (element) { $(element).valid(); };
    });
</script>

更新2：

这是一个完整的例子.使用Internet模板创建一个新的ASP.NET MVC 3项目.

模型：

public class MyViewModel
{
    [Required(ErrorMessage = "First Name is required")]
    [StringLength(30,ErrorMessage = "First Name must be {2} to {1} characters")]
    public string FirstName { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel
        {
            FirstName = "foo"
        });
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

视图：

@model MyViewModel

<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>
<script type="text/javascript">
    $(function () {
        var settngs = $.data($('form')[0],'validator').settings;
        settngs.onfocusout = function (element) { $(element).valid(); };
    });
</script>

@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.FirstName)
    @Html.ValidationMessageFor(x => x.FirstName)
    <button type="submit">OK</button>
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!