用比較廣義一點的方式來說,其實不論在哪種行業作哪樣子的工作,終究其目的就是在滿足別人的需

求後,進而產生出可以滿足自己需求的東西。所以,是哪個別人呢?或許是老闆、客戶、顧客等等的,而

又是甚麼東西呢?金錢、快樂、榮耀等等,寫到這裡大部分的男生一定"不小心"會想歪掉,呵呵!沒關

係,你是被賀爾蒙害的,不是你的錯,XD。

 

  So.....常常在工作上開發一些程式時會遇到一些不是理想狀況中的那種需求,但是我們一定得要去滿足

他;像之前在開發一個網站,我使用了 jQuery Validation Plugin 來驗證ASP.NET上面的表單,一切的功能

都很乖又好好的,這個滿足別人的過程相當地順暢呢,不過後來傳來修改的消息,一些網頁要改一些小外

觀,像是一些Button要換成圖片或是要變成文字連結的樣子;於是就很直覺的把那些需要修改的ASP.NET

網頁上的Button改成 ImageButton 或是 LinkButton,類似這樣子的修改工程簡單到光用看的就感覺差不多

已經作完了,只差有沒有出手而已XD。可是呢,問題就在修改完之後,凡是需要用到 jQuery Validation

的Button被換成 ImageButton 或是 LinkButton 之後,表單驗證功能就通通都失效了,頓時~

 

      天啊!!我是有動到甚麼了嗎??不是都是按鈕Button嗎?哪ㄟ安內??

 

  這個滿足別人之路開始出現一些不舒服的小石頭!可是路是一定要走下去,總不能跟別人凹說那個美

美的圖片不能拿來當按鈕吧,所以就來檢查一下究竟發生了甚麼事情。

 

我恭請ASP.NET的三個Button兄弟系列排排站在一起:

<asp:Button ID="Button1" runat="server" Text="Button" />

<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>

<
asp:ImageButton ID="ImageButton1" runat="server" /> 

 

然後讓這個ASP.NET網頁跑成Html,也就是叫他們一起脫光光來讓我健康檢查一下哩,呵呵。

<input type="submit" name="Button1" value="Button" id="Button1" />

<
a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>

<
input type="image" name="ImageButton1" id="ImageButton1" src="Image.jpg" style="border-width:0px;" /> 

 

  即便是兄弟是不一樣,再加上脫光光之後,那就更不一樣了,看看 type 屬性這邊,基本的

Button是 submit ,ImageButton 長成 image ,而 LinkButton 竟然沒有長出來!?難道??.........?

好啦,那這樣就大概知知道問題是哪裡了,因為 LinkButton 跟 ImageButton 生成Html之後,沒有作出

表單也就是Form的 submit 動作,直接作自己的事情,所以也就沒有跟 jQuery Validation 搭上關係了。

 

那接下來做個完整的測試吧,在網頁上加上一個 TextBox 並加上很簡單的驗證函數,如下:

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate-vsdoc.js" type="text/javascript"></script>  
<script type="text/javascript">  
      $(document).ready(function() { 

            $("#form1").validate({          
                     rules:{
                              TextBox1: { required: true }
                             },
               messages:{
                              TextBox1 : "這是必填欄位!"
                             }
             });
       });
</script> 

 

還有為這三位兄弟加上各自的 PostBack 對應事件,如下:

    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Write("Button1 說 TextBox 的值是:'" + TextBox1.Text + "'");
    }


    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        Response.Write("LinkButton1 說 TextBox 的值是:'" + TextBox1.Text + "'");
    }


    protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {
        Response.Write("ImageButton1 說 TextBox 的值是:'" + TextBox1.Text + "'");
    }

 

  然後執行這個網頁並分別按下各個按鈕(記得 TextBox 要留空白啊XD)看看,發現只有在按下

Button 時才會顯示沒通過驗證訊息,其他兩位就直接 PostBack 回去然後說不出半個字來了。

  所以解決的方法就是用手動的方式來讓這兩位跟 jQuery Validation 搭上線囉!

 

  在頁面的 $(document).ready() 裡面為他們兩位加上被點到就要去做驗證的功能,然後看看是否

回傳有通過驗證,如果有才會回去發各自對應的事件,如下:

<script type="text/javascript">  

      $(document).ready(function() { 

            $("#form1").validate({          
                     rules:{
                              TextBox1: { required: true }
                             },
               messages:{
                              TextBox1 : "必填欄位"
                             }
             });

            $("#ImageButton1").click(function() {

                return $("#form1").valid();
            });

            $("#LinkButton1").click(function() {

                return $("#form1").valid();
            });
       });

</script> 

 

然後用力的把他們好好的通通按過幾遍。很好!又讓這次滿足別人之路更接近滿足自己的目標了!XD!

  用比較廣義一點的方式來說,其實不論在哪種行業作哪樣子的工作,終究其目的就是在滿足別人的需

求後,進而產生出可以滿足自己需求的東西。所以,是哪個別人呢?或許是老闆、客戶、顧客等等的,而

又是甚麼東西呢?金錢、快樂、榮耀等等,寫到這裡大部分的男生一定"不小心"會想歪掉,呵呵!沒關

係,你是被賀爾蒙害的,不是你的錯,XD。

 

  So.....常常在工作上開發一些程式時會遇到一些不是理想狀況中的那種需求,但是我們一定得要去滿足

他;像之前在開發一個網站,我使用了 jQuery Validation Plugin 來驗證ASP.NET上面的表單,一切的功能

都很乖又好好的,這個滿足別人的過程相當地順暢呢,不過後來傳來修改的消息,一些網頁要改一些小外

觀,像是一些Button要換成圖片或是要變成文字連結的樣子;於是就很直覺的把那些需要修改的ASP.NET

網頁上的Button改成 ImageButton 或是 LinkButton,類似這樣子的修改工程簡單到光用看的就感覺差不多

已經作完了,只差有沒有出手而已XD。可是呢,問題就在修改完之後,凡是需要用到 jQuery Validation

的Button被換成 ImageButton 或是 LinkButton 之後,表單驗證功能就通通都失效了,頓時~

 

      天啊!!我是有動到甚麼了嗎??不是都是按鈕Button嗎?哪ㄟ安內??

 

  這個滿足別人之路開始出現一些不舒服的小石頭!可是路是一定要走下去,總不能跟別人凹說那個美

美的圖片不能拿來當按鈕吧,所以就來檢查一下究竟發生了甚麼事情。

 

我恭請ASP.NET的三個Button兄弟系列排排站在一起:

<asp:Button ID="Button1" runat="server" Text="Button" />

<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>

<
asp:ImageButton ID="ImageButton1" runat="server" /> 

 

然後讓這個ASP.NET網頁跑成Html,也就是叫他們一起脫光光來讓我健康檢查一下哩,呵呵。

<input type="submit" name="Button1" value="Button" id="Button1" />

<
a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>

<
input type="image" name="ImageButton1" id="ImageButton1" src="Image.jpg" style="border-width:0px;" /> 

 

  即便是兄弟是不一樣,再加上脫光光之後,那就更不一樣了,看看 type 屬性這邊,基本的

Button是 submit ,ImageButton 長成 image ,而 LinkButton 竟然沒有長出來!?難道??.........?

好啦,那這樣就大概知知道問題是哪裡了,因為 LinkButton 跟 ImageButton 生成Html之後,沒有作出

表單也就是Form的 submit 動作,直接作自己的事情,所以也就沒有跟 jQuery Validation 搭上關係了。

 

那接下來做個完整的測試吧,在網頁上加上一個 TextBox 並加上很簡單的驗證函數,如下:

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate-vsdoc.js" type="text/javascript"></script>  
<script type="text/javascript">  
      $(document).ready(function() { 

            $("#form1").validate({          
                     rules:{
                              TextBox1: { required: true }
                             },
               messages:{
                              TextBox1 : "這是必填欄位!"
                             }
             });
       });
</script> 

 

還有為這三位兄弟加上各自的 PostBack 對應事件,如下:

    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Write("Button1 說 TextBox 的值是:'" + TextBox1.Text + "'");
    }


    protected void LinkButton1_Click(object sender, EventArgs e)
    {
        Response.Write("LinkButton1 說 TextBox 的值是:'" + TextBox1.Text + "'");
    }


    protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {
        Response.Write("ImageButton1 說 TextBox 的值是:'" + TextBox1.Text + "'");
    }

 

  然後執行這個網頁並分別按下各個按鈕(記得 TextBox 要留空白啊XD)看看,發現只有在按下

Button 時才會顯示沒通過驗證訊息,其他兩位就直接 PostBack 回去然後說不出半個字來了。

  所以解決的方法就是用手動的方式來讓這兩位跟 jQuery Validation 搭上線囉!

 

  在頁面的 $(document).ready() 裡面為他們兩位加上被點到就要去做驗證的功能,然後看看是否

回傳有通過驗證,如果有才會回去發各自對應的事件,如下:

<script type="text/javascript">  

      $(document).ready(function() { 

            $("#form1").validate({          
                     rules:{
                              TextBox1: { required: true }
                             },
               messages:{
                              TextBox1 : "必填欄位"
                             }
             });

            $("#ImageButton1").click(function() {

                return $("#form1").valid();
            });

            $("#LinkButton1").click(function() {

                return $("#form1").valid();
            });
       });

</script> 

 

然後用力的把他們好好的通通按過幾遍。很好!又讓這次滿足別人之路更接近滿足自己的目標了!XD!

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 baechang 的頭像
    baechang

    翁百璋與大泡泡的奇幻旅程

    baechang 發表在 痞客邦 留言(0) 人氣()