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

最新推荐文章于 2024-10-18 17:51:23 发布

weixin_30625691

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ie421/archive/2008/08/07/1262563.html

版权

原文:http://www.cnblogs.com/S.Sams/archive/2008/08/07/tooltip.html

==============================================

非常讨厌在网页写文章, 写了半又没了, 又得重头来. 发下牢骚, 接着来!

实现功能:

1. Tooltip

2. Validate 表单验证

可分开独立使用

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

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

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

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

1. 即时表单验证和提示

2. 提交表单时验证

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

Code
<li>
    <label>航班号</label>
    <asp:TextBox ID="_flightno" runat="server" reg="\w{2}\d{4}" tip="设置航班号(大写)" toupper="true" />
</li>
<li>
    <label>航司(2字代码)</label>
    <asp:TextBox ID="_airline" runat="server" reg="\w{2}" toupper="true" /> (注意大写)
</li>
<li>
    <label>起飞时间</label>
    <asp:TextBox ID="_beingtime" runat="server" reg="\d{4}" tip="设置起飞时间格式: hhmm" /> (格式: hhmm)
</li>

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

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

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

再看看 CSS 的实现