• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

如何在asp.net中用jQuery实现便捷的提示功能和表单验证功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
实现功能:

     1. Tooltip

     2. Validate 表单验证

 

     可分开独立使用    

 

     您可以不写一行代码, 只需设置验证规则即可

www.25175.net

 

 

     其实园子已经存在不少基于jQuery的验证插件, 如: http://www.cnblogs.com/wzmaodong/archive/2008/05/21/1203962.html

但感觉使用起来过于麻烦, 要实现在大堆表单的验证, javascript 代码一大堆. 所以这里的设计原则就是使用便捷, 易维护, 同时适应性大.

在验证中使用了自定义正则表达式, 这样用起来就非常方便了.  先看下最后的效果图

 

     1. 即时表单验证和提示

      

 

     2.  提交表单时验证

       

 

     下面看下我们如何在 asp.net 中实现便捷的提示功能和表单验证功能

     

 

 

>

 

 

 

 以上的实现是不是很方便, 不用写大堆的 javascript 逻辑代码便可轻松实现验证和提示功能

 

通过调用 $(document).ready(function() {jQuery('input[tip],input[reg]').tooltip({onsubmit: true})}); 便完成数据的验证和提示功能. (该调用已集成在tooltip.js中)

onsubmit: true 这里设置是否触发 onsubmit 的提交验证事件.

 

再看看 CSS 的实现

 

 

 

.tooltipinputerr
}

 

 

 

 

 使用方法:

     一.

  二. 加入以上样式和引用tooltip.js文件

      

Tooltip.pack.js 1KB 0 2008/8/6 22:41:16
Tooltip.mini.js 1KB 0 2008/8/6 22:41:11
Tooltip.js 3KB 0 2008/8/6 22:41:04

 

 

 完整Demo下载  jquery-tooltip.rar 

 

     支持 Select Demo jquery-tooltip_select.rar


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
asp.net core模块学习发布时间:2022-07-10
下一篇:
微软Asp.netMVC5生命周期流程图发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap