本文實例講述了jQuery實現動態表單驗證時文本框抖動效果。分享給大家供大家參考。具體如下：
這里使用jQuery實現的動態表單驗證特效，當用戶輸入錯誤或沒有輸入的時候點擊提交按鈕，有問題的輸入框會抖動幾下，以提示用戶此項有問題，文本框抖動功能都有意思，這個表單比較典型，想實現jquery Ajax表單功能的可以參考。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-table-txt-check-shake-style-codes/
具體代碼如下：
<!DOCTYPE html><head><title>jQuery動態表單驗證效果</title><style type="text/css">body{ font-family:Arial, Sans-Serif; font-size:0.85em;}img { border:none;}ul, ul li{ list-style-type: none; margin: 0; padding: 0;}ul li.first{ border-top: 1px solid #DFDFDF;}ul li.last{ border: none;}ul p{ float: left; margin: 0; width: 310px;}ul h3{ float: left; font-size: 14px; font-weight: bold; margin: 5px 0 0 0; width: 200px; margin-left:20px;}ul li{ border-bottom: 1px solid #DFDFDF; padding: 15px 0; width:600px; overflow:hidden;}ul input[type="text"], ul input[type="password"]{ width:300px; padding:5px; position:relative; border:solid 1px #666; -moz-border-radius:5px; -webkit-border-radius:5px;}ul input.required { border: solid 1px #f00;}</style><script src="jquery-1.6.2.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() { $("#signup").click(function() { resetFields(); 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"); }); } });});function resetFields() { $("input[type=text], input[type=password]").removeClass("required");}</script></head><body> <ul> <li class="first"> <h3>您的名字：</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>密碼：</h3> <p><input type="password" name="passwd" /></p> </li> <li> <h3>密碼確認：</h3> <p><input type="password" name="passwd_conf" /></p> </li> <li> <h3>用戶名：</h3> <p><input type="text" value="MyUserName" id="userName" name="user_name" /></p> </li> <li class="last"> <a id="signup" href="#"><img src="images/buttonsubmit.png" style="vertical-align:middle;" /></a><img src="images/clickhere.png" style="vertical-align:middle;" /> </li> </ul></body></html>希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
