位置: 编程技术 - 正文

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

  • 房产税纳税义务人
  • 销售货物开票及销售收入
  • 吸收合并一般需要多久
  • 财政补贴交不交印花税
  • 以前年度税款需要交税吗
  • 销售报废车辆按多少计提销项税额
  • 对供应商的罚款怎么入账
  • 小微企业营业外收入税率是多少
  • 委托加工物资加工完毕验收入库后作为
  • 以库存现金代垫怎么做账
  • 已认证发票退回的会计分录
  • 固定资产房屋原值增加折旧月数怎么算
  • 双薪制工资如何缴纳个人所得税?
  • 商品流通企业会计心得体会3000字
  • 小规模季度超过30万,普票咋交税
  • 员工离职赔偿计入什么科目
  • 公司注销留抵税金能退税吗
  • 上年未计提所得税会计
  • 汇总会计报表和合并会计报表均是
  • 房租费属于无形资产吗
  • 汇兑结算方式可以分为
  • 去银行补充企业信息流程
  • 副调基金的会计分录怎么做?
  • 技术开发免征增值税属于普通零税率项目么?
  • 清算资金往来借贷方什么意思
  • 公司纳税高说明什么
  • 个人去税务局开租房发票需要缴纳多少税点
  • 广告公司广告费会计分录
  • 购买理财产品收到的利息分录
  • win10商店在哪打开
  • rundll32.exe应用程序错误 win7
  • 公司吸收合并股权
  • 财政补助收入的会计分录
  • 成本法转为权益法追溯的理解
  • 视同销售货物服务无形资产
  • 图片注入php
  • 酒店代销合同范本
  • 基础知识讲解
  • 使用电子计算机生成的会计凭证
  • 图像质量评价指标及方法 图像工程
  • 商业银行流动性风险监管指标
  • 期初金额和期末金额怎么算
  • 网页设置怎么在css中设置
  • php array合并
  • 小企业机械作业指导书
  • 公司借调员工
  • 准则对()、()和()等作出基本规定
  • 生育津贴如何做帐
  • 应收处理的两大内容是什么
  • 汇算清缴报表填报顺序
  • 自然人扣缴系统怎么申报个税
  • 小规模纳税人企业所得税2023
  • MySQL ERROR 2013 (HY000)错误解决方法
  • 什么是异地企业
  • 去税务局流程
  • 为什么一般纳税人税率高
  • 实收资本印花税最新政策2023年
  • 存货盘点后的检查
  • 税务滞纳金计入什么会计科目
  • 固定资产清理增值税计税依据
  • 印花税是怎么缴纳
  • 加油票和过桥过路费怎么做账
  • 哪些合同需要缴税
  • 增值税普通发票查询
  • 企业注销预付账款怎么做
  • 销项负数发票如何作废
  • sqlserver查询所有表的行数
  • 逼死win8的节奏 Win7升级至Win9仅需30美元 自动升级不需要重新安装
  • win8资源管理器未响应
  • win10一年更新几次
  • Node.js中的事件循环是什么
  • css@import
  • mongorestore报错
  • win10安装python2.7
  • unity控制三维模型
  • js正则 \w
  • 广东高速公路电子发票服务来平台
  • 车船税申报表样本
  • 2020年安徽省护理技能大赛视频播放
  • 局党组中心组成员
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设