demoshop

官方網站

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