爱上MVC系列~前端验证与后端数据有效性验证

简介:

有一句话,在10年前就是真理,到现在也一直都是,“前端验证可以没有,但后端验证必须要有”,这句话相信大家都没有意见吧,前端验证一般指通过JS方式实现的,友好的,个性的验证方式,而后端验证是指从表单提交过来,要进行入库之前的,数据有效性的验证,它不需要有美丽的外表,它需要有的仅仅是“有效”!

下面我将到MVC环境里的前端验证和后端验证作一个详细的说明,一个使用上的说明。

前端验证(KnockoutJs实现)

  //创建订单使用knockoutJs
    var CreateOrder = function () {
        var self = this;
        self.productid = ko.observable().extend({
            required: true
        });
        self.productname = ko.observable().extend({
            required: true
        });
        self.username = ko.observable().extend({
            required: true
        });
        self.price = ko.observable().extend({
            required: true,
            min: { params: 1, message: "价格要是大于(0)的整数!" }
        });
        self.count = ko.observable().extend({
            required: true,
            min: { params: 1, message: "您最少也要买一个吧!" },
            max: { params: 100, message: "最大一次只能买(100)个!" }
        });
        self.Do = function () {//ko方法名需要是大写的
            self.errors = ko.validation.group(self);
            if (self.isValid()) {
                $.ajax({
                    url: "/order/doOrder",
                    type: "POST",
                    data: { productid: self.productid(), productname: self.productname(), price: self.price(), count: self.count(), username: self.username() },
                    success: function (data) {
                        if (data.code == 1) {
                            location.href = location.href;
                        }
                        else
                            alert(data.code);
                    }
                })

            } else {
                self.errors.showAllMessages();
            }
        }
    }
    ko.applyBindings(new CreateOrder());

后端验证(数据实体有效性验证和ViewModel业务规则验证)

在这里多说两句,数据实体有效性验证是指和数据表相关的验证规则,如你的UserName字段长度为128字符,那么,你的实体验证的长度就是128,而ViewModel业务规则验证是指针对具体业务设计的视图模型,如用户注册模块,在这个模块里,你的UserName被产品经理规则为50个字符,那么,你的这个业务规则验证的长度就是50,当然,你的其它业务可能也用到了UserName字段,而它的业务规则当然可以不同,这就是有效性和业务规则。

下面代码是一个返回Json结果的Post请求方法,代码如下

        public JsonResult DoOrder(int productid, string username, string productname, decimal price, int count)
        {

            var entity = new Entity.Order_Info
            {
                TotalPrice = price * count,
                UserId = userid,
                UserName = username,
                AddDate = DateTime.Now,
                Info = "用户下单",
                Order_Detail = new List<Order_Detail> { new Order_Detail { Count = count, ProductId = productid, ProductName = productname, SalePrice = price } }
            };

            if (productid <= 0)
            {
                ModelState.AddModelError("ProductId", "商品ID不合法...");
            }

            #region 在action里拼接ModelState错误消息
            var errors = new StringBuilder();
            foreach (string key in ViewData.ModelState.Keys)
            {
                ModelState modelState = ViewData.ModelState[key];
                foreach (ModelError error in modelState.Errors)
                {
                    errors.Append(error.ErrorMessage + ",");
                }

            }
            #endregion

            if (entity.IsValid && ModelState.IsValid)
                orderService.DoOrder(entity);
            else
                return Json(new { code = entity.GetRuleViolationMessages() + errors });

            return Json(new { code = 1 });
        }

本文转自博客园张占岭(仓储大叔)的博客,原文链接:爱上MVC系列~前端验证与后端数据有效性验证,如需转载请自行联系原博主。

目录
相关文章
|
存储 前端开发 安全
前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
本文全面解析前端三种数据存储方式:Cookie、LocalStorage与SessionStorage。涵盖其定义、使用方法、生命周期、优缺点及典型应用场景,帮助开发者根据登录状态、用户偏好、会话控制等需求,选择合适的存储方案,提升Web应用的性能与安全性。(238字)
1063 0
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
544 60
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
921 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
333 2
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
2240 2
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
357 4
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
513 0
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
620 0
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
249 0

热门文章

最新文章