ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后
ASP.NET MVC借助jQuery的验证机制,提供了一套从客户端到服务端异步验证的解决方案,通常情况下,用起来相当方便。但面对一些相对特殊的情况,可能会遇到验证失效的场景,比如在使用ajax动态异步加载视图的时候。所以,有必要了解其背后运行的原理。首先从了解jQuery验证开始。本篇主要包括:
● jQuery验证的各种方式
● 错误信息是如何显示的
● 调用validate方法的背后发生了什么?
jQuery验证的各种方式
□ 通过class属性值实施验证规则
使用jQuery对表单元素进行验证,一种做法是通过为表单元素添加class属性值实现的。
如果想对jQuery验证汉化,可通过NuGet安装jQuery.Validation.Localization
:
Install-Package jQuery.Validation.Localization
<form><input id="Name" name="Name" type="text" class="required"/><hr/><input type="submit" value="提交"/></form>@section scripts{<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/localization/messages_zh.js"></script>
<script type="text/javascript">
$(function() {$('form').validate();});</script>}
□ 通过$.validator.addClassRules
方法自定义验证规则
通过 $.validator.addClassRules
方法还可以自定义验证规则,然后把新的规则名作为表单元素class属性的值。
<form><input id="Name" name="Name" type="text" class="name" /><br/><input id="z" name="z" class="zip" type="text"/><hr/><input type="submit" value="提交"/></form>@section scripts{<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/localization/messages_zh.js"></script>
<script type="text/javascript">
$(function() {$.validator.addClassRules({name: {required: true,
minlength: 2},zip: {required: true,
digits: true,
minlength: 5,maxlength: 5}});$('form').validate();});</script>}
□ 通过$.validator.addMethod
自定义验证规则
<form><input id="e" type="text" name="firstName"/><hr/><input type="submit" value="提交"/></form>@section scripts{<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/localization/messages_zh.js"></script>
<script type="text/javascript">
$(function () {$.validator.addMethod("notnumbers", function(value, element) {return !/[0-9]*/.test(value);}, "不能输入数字");
$('form').validate({rules: {firstName: {notnumbers: true
}}});});</script>}
□ 通过validate方法的json参数
通过validate方法的json参数,也可为表单元素设置验证规则。
<form><input id="e" type="text" name="userEmail"/><hr/><input type="submit" value="提交"/></form>@section scripts{<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/localization/messages_zh.js"></script>
<script type="text/javascript">
$(function() {$('form').validate({rules: {userEmail: {email: true,
required: true
}}});});</script>}
□ 动态添加或删除验证规则
通过rules方法可以为表单元素动态添加验证规则。
<form><input id="e" type="text" name="userEmail"/><hr/><input type="submit" value="提交"/></form>@section scripts{<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/localization/messages_zh.js"></script>
<script type="text/javascript">
$(function() {$('form').validate({rules: {userEmail: {required: true
}}});//为表单元素动态添加验证规则
$('#e').rules('add', {minlength: 2,maxlength:5});});</script>}
通过rules方法可以为表单元素动态移除验证规则。
<form><input id="e" type="text" name="userEmail"/><hr/><input type="submit" value="提交"/></form>@section scripts{<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/localization/messages_zh.js"></script>
<script type="text/javascript">
$(function() {$('form').validate({rules: {userEmail: {required: true
}}});//为表单元素动态添加验证规则
$('#e').rules('add', {minlength: 2,maxlength:5});//为表单元素动态移除验证规则
$('#e').rules('remove', 'minlength');});</script>}
错误信息是如何显示的
□ 通过messages对象
<form><input id="e" type="text" name="userEmail"/><hr/><input type="submit" value="提交"/></form>@section scripts{<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/localization/messages_zh.js"></script>
<script type="text/javascript">
$(function() {$('form').validate({rules: {userEmail: {required: true,
email: true
}},messages: {userEmail: {required: "*",
email: "哈哈,输入正确的email"
}}});});</script>}
□ 通过$.validator.addMethod
重写错误提示
通过$.validator.addMethod
方法还可以为默认验证规则重写错误提示信息。
<form><input id="Name" name="Name" type="text" class="name" /><br/><input id="z" name="z" class="zip" type="text"/><hr/><input type="submit" value="提交"/></form>@section scripts{<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/localization/messages_zh.js"></script>
<script type="text/javascript">
$(function() {$.validator.addClassRules({name: {newrequired: true,
minlength: 2},zip: {required: true,
digits: true,
minlength: 5,maxlength: 5}});$.validator.addMethod("newrequired", $.validator.methods.required, "我说这个字段必填");$('form').validate();});</script>}
□ 通过title属性值重写错误提示
通过表单元素的title属性值是重写错误提示最直接的做法。
<input id="z" name="z" class="zip" type="text" title="我是通过title设置的错误提示"/>
调用validate
方法的背后发生了什么?
→通过表单事件触发验证
这些表单事件包括focusin, focusout, keyup, submit, click,这些事件是可以禁止的。
$(".selector").validate({
onfocusout: false,
onkeyup: false,
onclick: false,
onsubmit: false
});
→获取validate对象,该对象包含了所有了验证规则和设置
可以通过如下方式获取validate对象。
var validator = $('.selector').data("validator");
→对各个表单元素进行验证
下一篇将试着去了解ASP.NET MVC异步验证的表单html元素是如何创建的。
相关文章
- ASP.Net中jQuery控制div弹出框效果
- jQuery AJAX and HttpHandlers in ASP.NET
- Parameter Binding in ASP.NET Web API
- ASP.NET Core 2.2 : 十六.扒一扒新的Endpoint路由方案 try.dot.net 的正确使用姿势 .Net NPOI 根据excel模板导出excel、直接生成excel .Net NPOI 上传excel文件、提交后台获取excel里的数据
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
- 连表查询都用Left Join吧 以Windows服务方式运行.NET Core程序 HTTP和HTTPS的区别 ASP.NET SignalR介绍 asp.net—WebApi跨域 asp.net—自定义轻量级ORM C#之23中设计模式
- C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件(Form Controls) C#串口通信程序
- .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了 [WPF]为旧版本的应用添加触控支持 js css等静态文件版本控制,一处配置多处更新.net版【原创】 C#图片处理,缩略图制作 SqlDataReader 结果集 转成 DataTable DataTable转成List集合 如何使用linq读取DataTable集合?
- 百度地图和高德地图坐标系的互相转换 四种Sandcastle方法生成c#.net帮助类帮助文档 文档API生成神器SandCastle使用心得 ASP.NET Core
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)
- bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX
- 通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? .Net Web开发技术栈
- jquery $.proxy使用 Jquery实现ready()的源码
- C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?
- 路由其实也可以很简单-------Asp.net WebAPI学习笔记(一) ASP.NET WebApi技术从入门到实战演练 C#面向服务WebService从入门到精通 DataTable与List<T>相互转换
- JavaScript(JQuery)获取asp.net全局变量与文本框值比较(示例)
- 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点
- ASP.NET MVC异步验证是如何工作的03,jquery.validate.unobtrusive.js是如何工作的
- asp.net 结合本地jQuery使在提交时显示错误提示
- asp.net-Creating JavaScript objects from ASP.NET objects