位置: 编程技术 - 正文

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

  • 所得税调增调减项目有哪些
  • 房屋用途 居住用房 住宅 区别
  • 农产品抵扣怎么算
  • 社保阶段性减免延长到年底
  • 注册资本没有实缴需要交印花税吗
  • 税收分类编码不可用是什么原因
  • 支付招聘费收到专票怎么记账
  • 递延收益摊销金额怎么算
  • 个人所得税中的股息红利应纳税额
  • 广告业与服务业哪个好
  • 公司给离职员工个税零申报
  • 应交增值税进项税额转出借贷方向表示什么
  • 供暖税收分类编码是多少
  • 一般纳税人能否享受残保金优惠
  • 对外投资增长过快
  • 上海、浙江 12万以上个税申报可以用支付宝啦
  • 结构化存款是什么
  • 固定资产发生非正常损失相关题目
  • 行政单位缴纳罚款如何记账
  • 医疗保险费扣除比例
  • 工业产值怎么计算的 统计
  • 申报工伤的流程及时间
  • 通讯费补贴入什么科目
  • 使用时间长但金币不见了
  • 其他应付款下的固定资产怎么报废
  • 线上授权经销商
  • 企业退款如何走账
  • win10怎么样禁止电脑运行某个程序
  • SetPoint.exe - SetPoint是什么进程 有什么用
  • 特种商品劳务税
  • 车辆被盗
  • 员工辞退补偿金扣个税吗
  • thinkphp5.1完全开发手册
  • 缴纳租房押金会被骗吗
  • 非货币性资产交换是企业经常发生的
  • 商业汇票不带息到银行办理贴现公式
  • 公司收到社保局的提醒函怎么办
  • trace 命令用法
  • xclip命令怎么用
  • 代理电信业务属于什么行业
  • 借方和贷方是什么意思 现金日记账
  • 织梦参数配置设置
  • 个人退税证明怎么开具
  • 金蝶软件修改凭证
  • 哪些税种影响当期损益
  • 金税四期主要监控的内容
  • 应收账款在贷方为负数表示什么
  • 跨月开票的业务怎么做
  • 增值税普通发票和电子普通发票的区别
  • 公司转账转错账户
  • 银行存款一直没有记账怎么调整
  • 股份支付应如何进行账务处理?
  • 工会经费为0是不用申报的?
  • 实物出资没有发票怎么办
  • 材料采购的流程
  • 代扣代缴个人所得税分录
  • 经营租入的固定资产计入什么科目
  • 进项税适用税率
  • 其他债权投资发生减值会影响所有者权益总额吗
  • 银行对公账户维护费申请表模板
  • 明细账建账的步骤
  • sql返回一条数据
  • mysql安装教程5.5安装好了在哪使用
  • win7电脑开机自启动管理在哪里
  • win8屏幕键盘快捷键
  • macbookpro如何开启查找我的mac
  • vs图片简单
  • 电脑因故障出现问题而启动
  • win10系统内置应用软件有哪些
  • win8 开始
  • python条件语句的基本结构
  • python入门笔记
  • unity数据结构和算法
  • jquery中keyup
  • 公司跨区迁移税务查账严吗
  • 百旺导入领购的新发票
  • 广东国税局官网网站
  • 智行火车票电子报销凭证
  • 2018年税务局
  • 基层税务稽查具体内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设