类似的文章已有，请看这里，个人感觉稍显复杂，日前也打算写一个简单的给项目用，一些关键点记录于此。最终效果如下：

后端使用Asp.net MVC 5，前端框架有：jquery.validate、jquery.validate、独立、requirejs、Bootstrap、都是当前最/较新版本jquery.validate就不用说了，目前比较流行的前端校验组件；jquery.validate。不引人注目基于jquery.validate，是为了配合Asp.net最有价值球员，微软自己写的，NuGet下可查找Microsoft.jQuery。不引人注目。验证安装，具体怎么用请继续往下看。

首先在后台我们定义实体类：

///摘要///厂家信息////摘要公共类制造商：操作模型{[密钥][数据库生成](数据库生成选项)。身份])公共int ID { get设置；} ///摘要///信用代码/注册号////摘要[必选(错误消息='信用代码/注册号不能为空)] [MaxLength(30)]公共字符串企业号{ get设置；} ///摘要///企业名称////摘要[必选(错误消息='企业名称不能为空)]公共字符串企业名称{ get设置；} ///摘要///注册地址////摘要[必选(错误消息='注册地址不能为空)]公共字符串注册地址{获取设置；} ///摘要///法人////摘要[必选(错误消息='法人不能为空)]公共字符串人工人员{ get设置；} ///总结///负责人负责人////摘要[必选(错误消息='负责人不能为空)]公共字符串PIC { get设置；}[必需（错误消息='手机号不能为空)][正则表达式(RegexLib).移动，错误消息='手机号码格式不正确)]公共字符串手机{ get设置；}[电子邮件地址]公共字符串电子邮件{ get设置；} ///摘要///商铺号////摘要公共字符串商店编号{ get设置；} ///摘要///店铺管理员姓名////摘要公共字符串StoreManagerName { get设置；} ///摘要///店铺管理员联系方式////摘要[正则表达式(RegexLib .移动，错误消息='手机号码格式不正确)]公共字符串StoreManagerNumber { get设置；} ///摘要///主要执照，三证合一营业执照////摘要公共字符串MainLicence { get设置；} ///summary ///json，其他执照，如生产许可证////摘要公共字符串OtherLicence { get设置；} ///摘要///入驻日期////摘要[必选(错误消息='入驻日期不能为空)]公共DateTimeEntDate { get设置；} ///摘要///离场日期////摘要[必选(错误消息='截止日期不能为空)]公共日期时间退出日期{获取设置；} ///摘要///厂家可提现余额////汇总公共小数余额{获取设置；}}实体各属性上面有属性形式的校验规则，当用户提交一个模型到后端行动时，MVC框架会据此自动帮我们完成校验工作，于是后端开发就很开心。然而在数据提交之前，前端也有必要进行第一轮的校验，如果使用jquery.validate，那么需要在射流研究…或标签里再写一遍类似的规则，能不能复用后端已有的代码呢？我们以属性企业号为例，在cshtml中写：

@Html .(m=m . basicinfo)的文本框。企业号，新{占位符='必填项、@class='form-control' })

最终生成的超文本标记语言如下：

输入类=' form-control ' data-val=' true ' data-val-maxlength='字段企业号必须是最大长度为"30"的字符串或数组类型" data-val-maxlength-max=' 30 ' data-val-required="信用代码/注册号不能为空id=' BasicInfo _ enterprise no ' name=' BasicInfo .企业编号"占位符="必填项value=' data-original-title=' title=' type=' text '

许多以数据开头的属性会自动添加到标签中。data-val表示需要验证控件。其他数据-从一系列验证规则和失败时的错误消息开始。可以自定义错误消息，否则框架将为您生成类，例如“企业号字段必须是最大长度为30的字符串或数组类型。”这种机器翻译语言。当然，jquery.validate的这些属性是无法识别的。为了让jquery.validate知道，我们需要jquery . validate . include。

现在我们来谈谈如何一起使用这些js。

新版本的jquery.validate已经支持AMD模式，所以可以由requirejs直接加载，但是jquery . validate . include不行，需要垫片配置，代码：

require . config({ baseurl : '/scripts '，path : { ' jquery ' : ' jquery-2 . 2 . 3 . min '，'敲除' : '敲除-3.4.0 '，' bootstrap': './components/bootstrap/3 . 3 . 6/js/bootstrap . min '，' validate ' : ' jquery . validate ' : ' jquery . validate . independent . min ' }，shim : { ' bootstrap ' : { deps :[' jquery ']，exports : ' bootstrap ' }，' validate independent ' : { deps 3:[' validate ']，export : ' validate '配置后，在页面中要求，点击提交按钮提交表单，每个js将开始工作。但这似乎没有任何其他影响，除了焦点将落在第一个验证失败的控件上。默认情况下，甚至jquery.validate也会在控件后面显示错误消息(errorPlacement函数)。你在开玩笑吗？实际上，这是因为jquery . validate . include覆盖了errorPlacement配置项(参见源代码中的attachValidation函数)，这反而为我们节省了一个工作过程。ErrorPlacement不适合我们，因为工具提示的html标记是由bootstrap动态生成的。请参考本文开头的链接，并选择覆盖showErrors函数。核心代码如下(tooltipvalidator.js):

定义([' validate include ']，function(){ function TooltipValidator(){ } TooltipValidator。prototype={ init :函数(验证器选项，tooltipOptions){ tooltipOptions=tooltipOptions | | { }；validatorOptions=validatorOptions | | { }；这个_tooltipOptions=$ .extend({}，{ placement: 'top' }，tooltipOptions，{ animate : false })；这个_validatorOptions=$ .扩展({}，{ //errorPlacement:函数（错误，元素){ ////什么也不做//}，显示错误3360函数(errorMap，错误列表){ for(var I=0；我喜欢这个。成功者。长度；I){ var success=this。继任名单[一]；$(this.successList[i]).工具提示('销毁');$(this.successList[i]).家长(' div.form-group ').remove CLaSS(' has-error ')；} for(var I=0；I错误列表。长度；I){ var错误元素=$(错误列表[I].元素);错误ElEMENT。家长(' div。形式组').addCLaSS(' has-error ')；错误ElEMENT。attr('数据-原始-标题'，错误列表[i]).消息)。工具提示(“显示”)；} }，submitHandler:函数（表单){返回false} }，validatorOptions)这个_ configTooltip()；这个_ configValidator()；}，config tooltip : _ function(){ $('[data-val=' true ']').工具提示（这个_ tooltipOptions)；}，config validator : _ function(){ $。验证器。设置默认值(此_ validatorOptions)；$ .验证器。包括。解析(文档)；} }返回新的TooltipValidator()；});这样我们就可以在需要回调函数中执行tooltipvalidator.init，不需要另外再写逻辑，于是前端同学也开心的笑了。这里还有一处需要注意，大家看到第49行代码，这是初始化jquery.validate。不引人注目的步骤。原本jquery.validate。不引人注目在其代码中已经有$(function(){ $ jqval。包括。解析(文档)；});但是由于$.准备好的会在师元素加载完成后（题外话：不是渲染完成)就执行，因此它会在tooltipvalidator有机会_configValidator之前完成，导致咱们的配置项无效（如果是在单页无刷新应用中，会发现之后再次加载局部页时，配置项有效了，因为$.准备好的只在初次加载的时候执行，而需要回调会每次加载都执行)。有两种解决方法：1、让jquery.validate。不引人注目依赖tooltipvalidator2、移除jquery.validate。不引人注目中的$ jqval。包括。解析(文档);这里选择第2种。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！