如何在asp.net中用jQuery實現便捷的提示功能和表單驗證功能

實現功能:

     1. Tooltip

     2. Validate 表單驗證

 

     可分開獨立使用    

 

     您可以不寫一行代碼, 只需設定驗證規則即可

www.25175.net

 

 

     其實園子已經存在不少基於jQuery的驗證外掛程式, 如: http://www.cnblogs.com/wzmaodong/archive/2008/05/21/1203962.html

但感覺使用起來過於麻煩, 要實現在大堆表單的驗證, javascript 代碼一大堆. 所以這裡的設計原則就是使用便捷, 易維護, 同時適應性大.

在驗證中使用了自訂Regex, 這樣用起來就非常方便了.  先看下最後的

 

     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 的實現

 

 

 

.tooltipinputerr
{}{
    padding: 2px 0 2px 18px;
    border: solid 1px red;
    background: #ffff99 url(/images/exclamation.png) no-repeat 2px center;
    }
    
.tooltipinputok
{}{
    padding: 2px 0 2px 18px;
    border: solid 1px green;
    background: url(/images/accept.png) no-repeat 2px center;
    }
    
.tooltipshowpanel
{}{
    z-index: auto;
    display: none;
    position:absolute;
    width: 276px;
    height: 35px;
    overflow: hidden;
    text-indent: 5px;
    line-height: 40px;
    font-size: 12px;
    font-family: Arial;
    background: url(/images/tooltop.gif) no-repeat left top;
    opacity:0.9;
    filter: alpha(opacity=90);
    }

 

 

 

 

 使用方法:

     一.

Download jQuery

Download jQuery 1.2.6 (16kb, Minified and Gzipped) Great for production use.

Download jQuery 1.2.6 (97kb, Uncompressed) Great for testing, learning and development.

Download jQuery 1.2.6 (30kb, Packed) For those that can't Gzip their JavaScript.

  二. 加入以上樣式和引用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