css翻譯系列—(web表單驗證之，使用jquery進行動畫驗證)

原文出處，有過項目開發經驗的同志們大都會碰到表單驗證這類問題，檢驗使用者輸入的有效性，過濾掉使用者的非法輸入，傳統的基於彈出警告框的方式已經不能夠滿足使用者對於視覺美觀的需要，如何以一種更加友好的方式提示使用者，是UI設計者們需要考慮的問題。

 

技術挺簡單的：當使用者按下提交按鈕的時候，驗證發生，所有非法的輸入欄位會顫抖，下面是一個非常簡單的表單，我不會解釋表單的結構樣式，這裡我只關注與動畫特效。

 

<ul>    <li class="first">        <h3>Your Name</h3>        <p>            <input type="text" value="First and Last name" id="name" name="name" /></p>    </li>    <li>        <h3>Email</h3>        <p>            <input type="text" value="my@email.com" name="email"  /></p>    </li>    <li>        <h3>Password</h3>        <p>            <input type="password" name="passwd" /></p>    </li>    <li>        <h3>Password confirmation</h3>        <p>            <input type="password" name="passwd_conf"  /></p>    </li>    <li>        <h3>User name</h3>        <p>            <input type="text" value="MyUserName" id="userName" name="user_name"  /></p>    </li></ul>

工作原理：當使用者按下提交按鈕後，jquery將會擷取到所有空的輸入欄位，如果至少有一個空的輸入欄位，動畫就會被應用到該輸入欄位上。

$("#signup").click(function() {    var emptyfields = $("input[value=]");    if (emptyfields.size() > 0) {        emptyfields.each(function() {            // animation goes here        });    }}); 

 

讓我們看看如何建立簡單的動畫，我們要向左移動每一個輸入欄位10px，接下來向右移動10px，重複這個動作一次並且設定回他們的原始位置

$("#signup").click(function() {    var emptyfields = $("input[value=]");    if (emptyfields.size() > 0) {        emptyfields.each(function() {            $(this).stop()                .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)                .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)                .animate({ left: "0px" }, 100)                .addClass("required");        });    }});

請記住：靜態驗證反饋是不能夠替換這種動畫驗證的，一旦驗證失敗每一個非法的輸入欄位需要清晰地被標示出來，這種有好的特效使用者捕獲使用者的注意力，在這裡你可以擷取更多關於驗證的文章