Asp.Net Mvc-表单验证的几种方式(微软自带的前后端校验和jQuery_Validate)-为EF实体设置特性标签

最新推荐文章于 2023-12-26 08:13:33 发布

原创最新推荐文章于 2023-12-26 08:13:33 发布 · 1.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #c#

Asp.Net MVC 同时被 3 个专栏收录

30 篇文章

订阅专栏

17 篇文章

订阅专栏

JQuery

11 篇文章

订阅专栏

本文介绍了ASP.NET MVC中微软自带的前后端表单验证特性，包括Required、Compare、StringLength等，并展示了如何为EF实体设置特性标签。还探讨了jQuery_Validate的使用方法，以及如何通过partial类和MetadataType解决EF实体类特性标签被刷新的问题，确保表单验证的正确实施。

一、微软(MVC)自带的校验方式：
微软自带验证特性规则：1.Required:必填验证 2Compare:比较验证（验证两个值是否一致）3.StringLength:字符串长度验证（可以单独设置最大值，也可以同时设置最小值）4.Range:用于设置数字、时间的范围 5.RegularExpression:正则表达式

创建实体类：

 public class NewsInfo
    {
        [Required(ErrorMessage ="*")]
        public int NewsId { get; set; }
        [Required(ErrorMessage = "*")]
        public string NewsTitle { get; set; }
        [Required(ErrorMessage = "*")]
        public DateTime? NewsDate { get; set; }
    }

根据实体类创建“强类型”视图页面（@Html.ValidationMessageFor()加载特性标签数据，生成校验规则和错误信息提示）
引入“隐式校验文件和Jquery文件” -生成

  <script src="~/Scripts/jquery-3.4.1.js"></script>
  <script src="~/Scripts/jquery.validate.js"></script>
  <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
</head>
<body>
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
            <h4>NewsInfo</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.NewsId, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.NewsId, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.NewsId, "", new { @class = "text-danger" })
                    @*@Html.ValidationMessageFor()加载特性标签数据，生成校验规则和错误信息提示*@
                </div>
            </div>

后台检验校验方式（ModelState）：

 public ActionResult MvcValidateDemo()
        {
            //后台验证 （MVC自带校验 前后台联动，校验成功自动赋值为true）
            if (ModelState.IsValid) { /*验证通过*/  } else { /*前台页面验证失败*/}
            return View();
        }

jQuery_Validate校验方式：

引入JS文件

  <script src="~/Scripts/jQuery.easyui-3.4.1/jquery-3.4.1.js"></script>
  <script src="~/Scripts/jquery.validate.js"></script>

通过JS代码或属性标签实现校验规则的设置：

 <script>
        $(function () {
            $('form').validate({
            //NewsTitle根据表单name属性值 来设置校验规则
                rules: {
                    NewsTitle: {
                        required: true
                    },
                    NewsDate: {
                        required: true,
                        minlength: 8,
                        maxlength: 16
                    }
                },
                messages:{
                    NewsTitle: {
                        required: '用户名不允许为空！'
                    },
                NewsDate:{
                        required: '请设置一个密码',
                        minlength: '密码长度不小于8个字符',
                        maxlength: '密码长度不大于16个字符'
                    }
                }
            });
        })
   </script>
    <style>
     /*错误信息提示样式*/
        .error {
            color: red;
        }
    </style>

使用partial为EF实体类设置属性特性标签：

使用EF自动生成的实体类打上特性标签如果一保存NewsModel.tt模板就会重新刷新(生成)实体类，也就是会冲刷掉实体类的原定义的属性特性标签。
解决方式：使用伙伴类共享它(伙伴类)人的元数据信息，从而拥有了相关属性的特性数据。
属性的特性数据保存在类型的“元数据”当中，所以共享元数据信息也就是拥有了相关特性数据。
创建伙伴类（新建一个类）NewsInfoExt：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Runtime.Remoting.MetadataServices;
using System.Web;

namespace FirstMvc_2020.Models
{
    //使用partial类为EF中的实体写入特性标签
    //1.命名空间保持一致
    //2.public partial class NewsTab 类名修饰符一致

    //让NewsTab共享NewsTabValidates类的元数据信息(属性特性标签信息存放在类型元数据里)
    [MetadataType(typeof(NewsTabValidates))]//MetadataType(“要引用的元数据类”)
    public partial class NewsTab//就相当于Ef实体类
    {

    }
    //此类为EF实体类提供 属性特性元数据信息
    public class NewsTabValidates
    {
        [Required(ErrorMessage ="*新闻ID不能为空！")]
        public int NewsId { get; set; }
        [Required(ErrorMessage = "*新闻标题不能为空！")]
        public string NewsTitle { get; set; }
        [Required(ErrorMessage = "*新闻发布时间不能为空！")]
        public Nullable<System.DateTime> NewsDate { get; set; }

    }
}

使用partial类为EF中的实体写入特性标签
1.命名空间保持一致
2.public partial class NewsTab 类名修饰符一致
3.[MetadataType(typeof(NewsTabValidates))]//MetadataType(“要引用的元数据类(伙伴类)”)
这样，EF实体类就不用写特性标签也能拥有相关的属性特性了。
使用特性：在该实体相关的强类型视图页面中引入JS文件：

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