美文网首页
WebApi数据检验

WebApi数据检验

作者: 凌雲木 | 来源:发表于2018-03-13 22:17 被阅读45次

    WebAPI的模型校验同ASP.NET MVC的数据校验。

    若想在WebAPI加入模型验证,需要三个步骤;

    • 1添加需要校验的
    • 2添加校验逻辑
    • 3 前端测试验证结果

    增加模型验证Model

    添加用户信息类,添加校验标记。
    常用的校验标记有:

    . Required:必须满足不为空

    . RegularExpression:正则表达式验证

    . StringLength:指定字符允许的范围

    . DataType:校验数据类型

    . Range:指定数字允许的范围

    下面是使用了校验标记的用户信息类

       /// <summary>
        /// 用户信息类
        /// </summary>
        public class Userinfo
        {
            /// <summary>
            /// 用户编号
            /// </summary>       
            public int id { get; set; }
            /// <summary>
            /// 姓名
            /// </summary>
            [Required(ErrorMessage = "用户名称不能为空")]
            [MaxLength(6, ErrorMessage = "用户名称不能超过6个字符")]     
            public string name { get; set; }
            /// <summary>
            /// 密码
            /// </summary>
            public string pwd { get; set; }
            /// <summary>
            /// 年龄
            /// </summary>
            [Display(Name = "年龄")]
            [Range(1, 100,ErrorMessage ="年龄必须介于1到100")]
            public int age { get; set; }
            /// <summary>
            /// 月薪
            /// </summary>
            [RegularExpression(@"^\d+(\.\d{1,2})?$",ErrorMessage ="月薪需保留两位有效小数")]//保留两位小数
            public double salary { get; set; }
            /// <summary>
            /// 部门编号
            /// </summary>
            public int deptID { get; set; } = 1;
            /// <summary>
            /// 部门名称
            /// </summary>
            public string DapName { get; set; }
            /// <summary>
            /// 创建时间
            /// </summary>
            [Display(Name="创建时间")]
            [DataType(DataType.Date,ErrorMessage ="创建时间不是时间类型")]
            public DateTime createtime { get; set; }
    
        }
    
    添加校验逻辑

    WebAPI的校验逻辑是在控制器下的方法中起作用的,如下示例

           [HttpGet]
            public HttpResponseMessage AddUser(Userinfo model)
            {
    
                if (ModelState.IsValid)
                {
    
                    return Request.CreateResponse(HttpStatusCode.OK, moStudent);
                }
                return Request.CreateResponse(HttpStatusCode.BadRequest, ModelState);
             }
    

    ModelState.IsValid就是用来判断,传入的参数-用户信息类 ,是否通过校验。如果不通过,返回错误信息。

    前端显示验证结果

    添加一个htmL页面

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>
            <span>姓名</span>
            <input type="text" id="name" value="小明"/>
        </div>
        <div>
            <span>密码</span>
            <input type="text" id="pwd" value="123"/>
        </div>
        <div>
            <span>年龄</span>
            <input type="text" id="age" value="12"/>
        </div>
        <div>
            <span>月薪</span>
            <input type="text" id="salary" placeholder="保留两位小数"  value="12.23"/>
        </div>
        <div>
            <span>创建时间</span>
            <input type="text" id="createtime" value="2017-12-12" />
        </div>
        <div>       
            <input type="button" id="btn" value="提交"/>
        </div>
        <div>
            <span>结果:</span>
            
            <span id="result"></span>
        </div>
    </body>
    </html>
    <script src="JS/jquery-1.91.min.js"></script>
    <script>
        $("#btn").click(function () {
             var parames = {};
            parames.name = $("#name").val();
            parames.pwd = $("#pwd").val();
            parames.age = $("#age").val();
            parames.salary = $("#salary").val();
            parames.createtime = $("#createtime").val();
            parames.name = $("#name").val();
            $.ajax({
                type: "GET",
                url: "http://localhost:47362/api/Values/AddPage/",
                data: parames,
                success: function (data) {
                    //$("#result").html(data.success);
                    alert(data.success);
                },
                error: function (a, b, c) {
                    //$("#result").html(c + a.responseText);
                    alert(c +":  "+ a.responseText);
                }
            });
    
        });
    </script>
    
    运行调试 ,
    image.png
    image.png
    image.png
    image.png
    image.png
    image.png

    相关文章

      网友评论

          本文标题:WebApi数据检验

          本文链接:https://www.haomeiwen.com/subject/kmtzfftx.html