位置: 编程技术 - 正文

jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析

编辑:rootadmin

推荐整理分享jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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

后端使用Asp.net mvc5,前端框架有:jquery.validate、jquery.validate.unobtrusive、requirejs、Bootstrap,都是当前最/较新版本。jquery.validate就不用说了,目前比较流行的前端校验组件;jquery.validate.unobtrusive基于jquery.validate,是为了配合Asp.net mvc,微软自己写的,NuGet下可查找Microsoft.jQuery.Unobtrusive.Validation安装,具体怎么用请继续往下看。

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

实体各属性上面有Attribute形式的校验规则,当用户提交一个Model到后端Action时,MVC框架会据此自动帮我们完成校验工作,于是后端开发就很开心。然而在数据提交之前,前端也有必要进行第一轮的校验,如果使用jquery.validate,那么需要在js或标签里再写一遍类似的规则,能不能复用后端已有的代码呢?我们以属性EnterpriseNo为例,在cshtml中写:

@Html.TextBoxFor(m => m.BasicInfo.EnterpriseNo, new { placeholder = "必填项", @class = "form-control" })

jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析

最终生成的html如下:

<input class="form-control" data-val="true" data-val-maxlength="字段 EnterpriseNo 必须是最大长度为“”的字符串或数组类型。" data-val-maxlength-max="" data-val-required="信用代码/注册号不能为空" id="BasicInfo_EnterpriseNo" name="BasicInfo.EnterpriseNo" placeholder="必填项" value="" data-original-title="" title="" type="text">

标签里面自动加上了很多data-开头的属性,data-val表示该控件需要校验,其它data-开头的就是一系列校验规则和失败时的错误信息,错误信息可以自定义,否则框架会给你生成类如“字段 EnterpriseNo 必须是最大长度为的字符串或数组类型。”这种机器翻译语言。当然这些属性jquery.validate是不认的,要让jquery.validate认识,就需要jquery.validate.unobtrusive出马了。

现在我们来说这些js如何配合使用。

新版本的jquery.validate已经支持AMD模式,所以可以直接使用requirejs加载,jquery.validate.unobtrusive则不行,需要shim配置,代码:

配置好后,在页面中require,此时点击submit按钮提交表单,各js就开始作用了。但是除了焦点会落到第一个校验失败的控件上,似乎并没有其它效果,连jquery.validate默认的在控件后面展示错误信息(errorPlacement函数)都没有了,are you kidding me?其实这是因为jquery.validate.unobtrusive覆盖了errorPlacement配置项(看源码中的attachValidation函数),对我们来说反而省了一道工序。由于tooltip的html标记是由bootstrap动态生成的,所以errorPlacement并不适合我们,参考本文开头的链接,选择覆写showErrors函数,核心代码如下(tooltipvalidator.js):

这样我们就可以在require回调函数中执行tooltipvalidator.init,不需要另外再写逻辑,于是前端同学也开心的笑了。这里还有一处需要注意,大家看到第行代码,这是初始化jquery.validate.unobtrusive的步骤。原本jquery.validate.unobtrusive在其代码中已经有$(function () { $jQval.unobtrusive.parse(document); });但是由于$.ready会在Dom元素加载完成后(题外话:不是渲染完成)就执行,因此它会在tooltipvalidator有机会_configValidator之前完成,导致咱们的配置项无效(如果是在单页无刷新应用中,会发现之后再次加载局部页时,配置项有效了,因为$.ready只在初次加载的时候执行,而require回调会每次加载都执行)。有两种解决方法:1、让jquery.validate.unobtrusive依赖tooltipvalidator;2、移除jquery.validate.unobtrusive中的$jQval.unobtrusive.parse(document);这里选择第2种。

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

jquery ajax后台返回list,前台用jquery遍历list的实现 如下所示:$.ajax({type:'post',url:"maintain_findRoomByBuildingId.shtml",cache:false,data:{"buildingId":buildingId},dataType:'json',success:function(data){jQuery.each(data.roomList,function(i,item

jQuery grep()方法详解及实例代码 什么是jQuery.grep()?jQuery.grep()是一个查找满足过滤函数的数组元素的函数。原始数组不受影响,返回值为数组。用法介绍:写法:jQuery.grep(array,function(ele

jQuery绑定事件的四种方式介绍 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易

标签: jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析

本文链接地址:https://www.jiuchutong.com/biancheng/379380.html 转载请保留说明!

上一篇:jQuery 移动端拖拽(模块化开发,触摸事件,webpack)(jquery实现移动端)

下一篇:jquery ajax后台返回list,前台用jquery遍历list的实现

  • 如何确定合伙企业
  • 运输货车折旧计算公式
  • 未开票收入以后必须开票吗
  • 终止经营净利润计算公式
  • 退货一定要卖家同意吗
  • 增值税专用发票有效期是多长时间
  • 银行手续费进项税怎么入账
  • 经营性应收项目和经营性应付项目
  • 审核发票的要点和方法
  • 退休人员额外收入的税收标准
  • 不动产视同销售增值税税率
  • 产权转让与股权转让
  • 减免增值税后附加税还用计提吗
  • 当月支付租金没有发票
  • 银行账户销户时需要收回开户许可证吗
  • 增值税发票清单怎么导出
  • 企业所得税季度申报填写示例
  • 退休人员取得单位证明
  • 小微企业贷款利息补贴
  • 总额法和净额法哪个合理
  • 电信增值税发票怎么抵扣
  • 专用发票没有写购买方电话号码
  • 怎样去除快捷方式小箭头win10
  • 路由器怎么重置网络
  • 如何更改windows11显示语言
  • 资产减值损失会影响营业利润吗
  • 在企业所得税前扣除的有哪些
  • 以非现金资产清偿债务的,债权人应当
  • 防伪税控盘全额抵扣政策
  • 递延所得税资产和递延所得税负债
  • 印花税具体包括哪几类
  • 利息支出属于成本项目吗
  • 持续集成的步骤
  • HTTP 错误 500.19- Internal Server Error 错误解决方法
  • 记录一次排查PHP脚本执行卡住的问题
  • php背景图片代码
  • php红包源码
  • 合并命令如何使用
  • phpcms v9安装教程
  • 企业对外担保代偿能否税前扣除 税务局
  • 投资公司如何注册勘察设计工程师证书
  • 织梦专题页模板
  • 企业所得税计提分录
  • 怎么在电子税务局查询进项发票
  • 百旺税控盘跨月发票作废
  • sql server2005使用方法
  • mysql命令列界面
  • Sql Server中Substring函数的用法实例解析
  • 利润表一般采用
  • 产品广告费属于什么会计科目类别
  • 金蝶软件中怎么让以前年度损益调整在利润表中取不到数
  • 工业企业外购存货的入账价值一般包括()
  • 建筑租赁公司账务处理
  • 超期应收款管控
  • sql数据库还原方法
  • sql server常用
  • centos5.8服务器
  • 手把手教你如何退税
  • xp远程连接win7
  • win8怎么没有无线网图标不见了
  • win8.1专业版怎么升级成win10
  • win10恢复到win7系统
  • rmxp4droid for 天敏电视盒子
  • cocos2dx加libevent库
  • python的正则语法
  • ecmascript5
  • animate javascript
  • css常用布局方式
  • python多进程模块
  • 快速备份mysql数据库
  • shell脚本的实现
  • express框架的优缺点
  • 控制游戏类型
  • javascript要学到什么程度
  • 面向对象的三大特征
  • python默认方法
  • before和after在句子中怎么翻译
  • 个人工资扣税标准计算
  • 芜湖市房产退契税是什么政策
  • 深圳税务忘记密码
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设