demoshop

demo, trying to be the best_

官方網站
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

前端驗證的極品 jQuery:Validation 相信大家都熟了,最近想利用它來處理防止重複送出的按鈕時發生了怪事,在 Firefox 執行的很順暢,但是在 IE 各版本都會發生 Java Script 爆掉的情況,難道說知名套件有那麼嫩?

●馬上來一個很簡單的 Form

<form action="/test" method="post">
      <p><label for="name">姓名:</label> <input id="name" name="name" type="text" value="" /></p>
      <p><label for="email">電郵:</label> <input id="email" name="email" type="text" value="" /></p>
      <p><label for="pw">密碼:</label> <input id="pw" name="pw" type="text" value="" /></p>
      <input type="submit" value="送出" />
</form>

●接者實作基本的驗證並且利用 submitHandler 去做出限制第二次送出的動作。

<script type="text/javascript" >
$('form').validate({
    rules: {
        name: { required: true },
        email: { required: true, email: true },
        pw: { required: true }
    },
    submitHandler: function ()
    {
        $('form input:submit').attr('disabled', 'disabled');

        $('form input:submit').submit();
    }
});
</script>

注意事項這樣看起來相當的好,將按鈕關掉後再執行送出,但是這是會死人的,因為使用了送出的寫法是找到 submit 按鈕送出,這樣會造成重複驗證,而且不會有結束的一天,也就是我們說的無窮迴圈。正確的寫法應該改成下面這樣。

<script type="text/javascript" >
$('form').validate({
    rules: {
        name: { required: true },
        email: { required: true, email: true },
        pw: { required: true }
    },
    submitHandler: function (form)
    {
        $('form input:submit').attr('disabled', 'disabled');

        form.submit();
    }
});
</script>

 


●最後 demo 幹了一件很無聊的事情,假的上傳進度

<script type="text/javascript" >
$('form').validate({
    rules: {
        name: { required: true },
        email: { required: true, email: true },
        pw: { required: true }
    },
    submitHandler: function (form)
    {
        $('form input:submit').attr('disabled', 'disabled');
       
        interval = window.setInterval(function ()
        {
            var text = $('form input:submit').val();
            if (text.length < 5)
            {
                $('form input:submit').val(text + '.');
               
            } else
            {
                $('form input:submit').val('送出');
            }
        }, 200);
        form.submit();

    }
});
</script>

 

分隔線http://valums.com/wp-content/uploads/ajax-upload/demo-jquery.htm

回應討論