MVC 5 - 添加客户端验证以拒绝默认值?

 铭娟佑廷雅冰 发布于 2023-01-04 11:08

我正在使用a DropDownListFor并提供默认选择,-- Select Make --其中包含空值.我想向用户提供一些操作提示(因此"选择Make")但不想让他们实际提交该值.目前该网站允许这样做.

我认为添加最小长度为2会阻止它,但没有运气.

我是.NET MVC的新手,所以如果我以完全错误的方式做这件事,请告诉我.

实际的POST请求正文是:

Make=&OtherArgument=1&NextArgument=test

查看代码:

@Html.LabelFor(m => m.Make)
@Html.DropDownListFor(m => m.Make, Model.Make, "-- Select Make --")
@Html.ValidationMessageFor(m => m.Make)

型号代码:

    [Required(ErrorMessage = "*", AllowEmptyStrings = false)]
    [StringLength(50, MinimumLength = 2, ErrorMessage = "*")]
    public IEnumerable Make = new List
    {
        new SelectListItem
        {
            Text = "Deere",
            Value = "Deere"
        },
        new SelectListItem
        {
            Text = "Case",
            Value = "Case"
        },
        new SelectListItem
        {
            Text = "CAT",
            Value = "CAT"
        }
    };

hutchonoid.. 6

这里的第一个问题是所选模型与用户可以选择的模型之间的区别.将ModelSelect属性添加到模型可以解决此问题(以及一些视图更改).

第二个问题是通过添加脚本引用来启用jquery不显眼的验证.

这些是您需要采取的步骤,以使javascript验证阻止表单提交(假设MVC4 +).

模型

    public class AModel
    {
        [Required(ErrorMessage = "*", AllowEmptyStrings = false)]
        [StringLength(50, MinimumLength = 2, ErrorMessage = "*")]
        public string SelectedMake { get; set; }
        public IEnumerable Make = new List
        {
            new SelectListItem
            {
                Text = "Deere",
                Value = "Deere"
            },
            new SelectListItem
            {
                Text = "Case",
                Value = "Case"
            },
            new SelectListItem
            {
                Text = "CAT",
                Value = "CAT"
            }
            };
    }

请注意SelectedMake属性

视图

@using(Html.BeginForm()){
    @Html.LabelFor(m => m.Make)
    @Html.DropDownListFor(m => m.SelectedMake, Model.Make, "-- Select Make --")
    @Html.ValidationMessageFor(m => m.SelectedMake)
    
}

注意下拉列表和ValidationMessageFor的第一个参数中的SelectedMake

脚本参考




需要启用jquery验证

屏幕抓取

在此输入图像描述

注意红色的星号,jquery unobtrusive现在阻止表单提交.

1 个回答
  • 这里的第一个问题是所选模型与用户可以选择的模型之间的区别.将ModelSelect属性添加到模型可以解决此问题(以及一些视图更改).

    第二个问题是通过添加脚本引用来启用jquery不显眼的验证.

    这些是您需要采取的步骤,以使javascript验证阻止表单提交(假设MVC4 +).

    模型

        public class AModel
        {
            [Required(ErrorMessage = "*", AllowEmptyStrings = false)]
            [StringLength(50, MinimumLength = 2, ErrorMessage = "*")]
            public string SelectedMake { get; set; }
            public IEnumerable<SelectListItem> Make = new List<SelectListItem>
            {
                new SelectListItem
                {
                    Text = "Deere",
                    Value = "Deere"
                },
                new SelectListItem
                {
                    Text = "Case",
                    Value = "Case"
                },
                new SelectListItem
                {
                    Text = "CAT",
                    Value = "CAT"
                }
                };
        }
    

    请注意SelectedMake属性

    视图

    @using(Html.BeginForm()){
        @Html.LabelFor(m => m.Make)
        @Html.DropDownListFor(m => m.SelectedMake, Model.Make, "-- Select Make --")
        @Html.ValidationMessageFor(m => m.SelectedMake)
        <input type="submit" value="submit" />
    }
    

    注意下拉列表和ValidationMessageFor的第一个参数中的SelectedMake

    脚本参考

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    

    需要启用jquery验证

    屏幕抓取

    在此输入图像描述

    注意红色的星号,jquery unobtrusive现在阻止表单提交.

    2023-01-04 11:11 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有