位置: 编程技术 - 正文

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的实现

  • 如何申请一般纳税人
  • 土地增值税清算管理规程
  • 补缴以前年度附加税怎么做账
  • 个人能否申请延迟退休
  • 房地产企业土地出让金抵减销项税额
  • 收入与支出怎么算利润率
  • 发票分开开票
  • 不得抵扣的会计分录
  • 付垫资款给其他公司应该怎么做账?
  • 总公司业务分公司开票是虚开吗
  • 不动产抵扣涉及净值,这里的净值是否扣除减值准备,是否扣除不动产改变用途当月的折旧额?
  • 小型微利企业普惠性
  • 购买办公用品未取得发票怎么办
  • 公司投资理财产品收益怎么算
  • 涉嫌虚开发票的几种情况
  • 打印的行程单可以删除吗
  • 企业应收是什么意思
  • safari下载的文件怎么删除
  • 长期待摊费用期末在借方还是贷方
  • 腾讯手游助手使命召唤怎么滑铲
  • 金融负债包括哪几项
  • 法定盈余公积金转增资本
  • 办公家具折旧年限及计算方法
  • php获取多选框的值
  • 固定资产核销是资产损失吗
  • 事业单位专项款不能购买资产吗
  • 捐赠与赞助
  • Javascript Object和Map之间的转换
  • Windows操作系统出现内存错误解决方法
  • wx小程序
  • PHP:imagealphablending()的用法_GD库图像处理函数
  • 境外向国内汇款新规
  • 工具tj
  • 二手车折旧法
  • Ant Design-vue 解决input前后空格问题(推荐)
  • 公司从银行提取现金4000元备作零星开支
  • 企业合并属于非企业吗
  • 红字发票是可以抵扣吗
  • 新的会计制度
  • 差旅补助要计入成本吗
  • 厂房无偿使用交税吗
  • 国库券利息收入属于企业所得税纳税调整项目
  • 小规模企业出租不动产增值税税率
  • 企业取得的财政补贴是否缴纳增值税
  • 职工报销费用
  • 研发费用不能加计扣除的有哪些项目
  • 明细与发票
  • 简易办法征收增值税有几种情况
  • 政府补助计入资本公积吗
  • 进口关税如何记账
  • 企业购买新能源车免购置税吗
  • 劳务费收入交印花税吗
  • MySql5.6使用validate password 插件加强密码强度的安装及使用方法
  • win2008定时任务设置
  • 两台苹果怎么用电脑把数据同步
  • centos7图形安装
  • 电脑windows8怎么样
  • linux系统怎么更改语言
  • win7系统360浏览器崩溃
  • win10系统怎样卸载程序
  • win7注册表文件位置
  • 事件处理的三个要素
  • cocos2dx游戏开发教程
  • cocos html
  • 解决Android Studio下载gradle慢
  • excel自定义样式
  • vue组件生命周期执行顺序
  • shell命令读取文件并新增另一文件到指定行
  • 用javascript写表单代码
  • jquery双击
  • input输入@弹出框
  • js使文本框失去焦点的方法
  • python读写docx
  • Python Sqlite3以字典形式返回查询结果的实现方法
  • jquery事件解绑
  • 安徽省电子发票开具流程
  • 新疆干部在线网络平台登录
  • 内蒙古自治区耕地保养条例
  • 誊抄什么意思
  • 个人所得税怎么扣除
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设