首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >双重保险——前端bootstrapValidator验证+后台MVC模型验证

双重保险——前端bootstrapValidator验证+后台MVC模型验证

作者头像
Ryan_OVO
发布2023-10-19 19:24:22
发布2023-10-19 19:24:22
4000
举报
文章被收录于专栏:程序随笔程序随笔

我们在前端使用BoostrapValidator插件验证最基本的格式要求问题,同时在后台中,使用MVC特有的模型验证来做双重保险。对于boostrapValidator我就不说了,具体请看《bootstrap登入注册时表单验证实现》。而对于后端的模型验证这就是MVC的知识了,我也是好久以前研究过,现在都忘得差不多了,临时捡起来了,在这里我就详细说说。首先是我们的前端Razor页面也就是我们的cshtml页面需要引入实体类,假设实体类是UserModel类,它记录了最基本的用户名,密码,邮箱等。在前端的cshtml页面中我们引用这个类,然后就是正常的html结合bootstrap样式的前端代码编写,但是在这里建议使用UserModel类中的字段来命令标签的id和name属性,如果乱取名,MVC框架怎么来识别是哪个类?因此在这里建议id和name值都取作UserModel类的字段值。而后在标记了[HttpPost]的Action方法中,将UserModel用作参数传递进来,你就会发现前端的值已经绑定在了相应的字段上了。那么怎么来做后端验证呢?这就需要用到注解属性了。我们在UserModel类上根据我们的需要标注[Required][RegularExpression()]等注解属性。然后在action方法中使用:

代码语言:javascript
复制
ModelState.IsValid

来做判断,如果不满足要求,MVC框架的模型绑定会给我们将上面的值设置为false。接下来就是我们自己的判断了。 但是在这里要注意,前端的boostrapValidator插件不能和表单的submit()事件同时使用,举个例子:

代码语言:javascript
复制
$(function(){ 
$(form).boostrapValidator(....);

$(form).submit(); //这两个不能同时使用,要不然不会提交表单到后台.
})

bootstrapValidator插件与form.submit()事件冲突,不知道为什么就是验证完之后就是不能提交表单,最好还是使用ajax提交吧。

同时在前端应该判断好bootstrapValidator是否验证通过再去提交表单。也就是说先判断bootstrapValidator.IsValid(),再去提交表单。

最好销毁bootstrapvalidator插件并重新加载验证的代码:

代码语言:javascript
复制
$("form").data("bootstrapValidator").destory();

$("form").data("bootstrapValidator", null);

参考:http://www.cnblogs.com/RegicideGod/archive/2013/02/04/2892451.html

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-07-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档