位置: 编程技术 - 正文

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

  • 天然气税率13%变11%
  • 医疗保险单位和个人交的区别
  • 多发了工资怎么处理
  • 劳务派遣人员工资可以由用工单位发放么
  • 超范围经营是不是就等于无证经营
  • 垫付的医疗费保险多久可以报销
  • 担保预计负债要如何做账?
  • 所得税汇算清缴分录怎么做
  • 城镇土地使用税纳税义务发生时间
  • 房屋建筑物评估技术鉴定表
  • 缴纳了土地增值税怎么退
  • 建筑业简易征收差额征税的计算案例
  • 业务招待费扣除计算举例说明
  • 个人买卖二手房交什么税
  • 出租车发票有出租车信息吗
  • 定期定额户需要自己申报吗
  • 企业所得税申报表在哪里打印
  • 投入资本属于净资产吗
  • 没发票大额费用支出能税前扣除吗?
  • 什么是工商企业为了筹集资金而发行的债券
  • 没有系统U盘,电脑密码忘记了如何打开电脑
  • 装修公司开专票要交几个点
  • 增值税专用发票的税率是多少啊
  • php判断为空的方法有哪些
  • php文件包含的4种方式
  • 苹果11 关机方法
  • php详细教程
  • php umask
  • 业务招待费的税收金额怎么算
  • 现金日记账怎么记账
  • 发票上可以盖财务专用章和发票专用章吗
  • 营改增后土地增值税如何计算
  • vue自定义指令生命周期
  • tf club下载
  • lua命令库
  • 营业税金及附加税率
  • css中权重值是什么意思
  • cms和php的关系
  • 现金销售商品的会计分录
  • 业务招待费可以结转吗
  • python 复选框怎么设置
  • phpcms数据库文件
  • 开票额度超了怎么办
  • 财务软件费用可以抵税吗
  • 变更税务法人需提供银行流水吗
  • 银行会计核算方法的特点
  • 一般纳税人公司开普票几个税点?
  • 无票收入小规模怎么做账,要交税吗?
  • 平销返利如何开票是负数的
  • 影响企业所得税的因素
  • 应交税金为负数应该填在资产负债表哪一栏
  • 资产报废折旧
  • 建筑安装合同印花税率怎么算
  • 网银转账被退回来了
  • 自己公司刷自己的信用卡
  • 印花税的计税依据及税率
  • 发票的抵扣期限是多少天
  • sql server常规错误
  • mysql事务用法
  • mysql好在哪里
  • pc端直通车的位置有些?
  • linux系统中用户密码保存在什么文件中
  • FC7中用yum自动搜索安装软件
  • vnc server apk
  • windows注册表保存在BIOS
  • win7系统怎样安装字体
  • Android OpenGL ES(五)----进入三维正交投影和透视投影推导
  • 批处理 /b
  • javascript按位与
  • eclipse从本地导入项目
  • jquery validate文档
  • js原始值有哪些
  • python的遍历
  • Unity3D游戏开发毕业论文
  • 浏览器环境下的事件循环
  • android布局教程
  • 晋税通注册
  • 结转城市维护建设税
  • 上海税务机关代码查询
  • 重庆国税电子税务局手机版
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设