Jquery 實作表單驗證，所有驗證透過方可提交

小小測試

 Reg


 <script><li> $(function(){<li><li> var ok1=false;<li> var ok2=false;<li> var ok3= false;<li> var ok4=false;<li> // 驗證使用者名稱<li> $('input[name="username"]').focus(function(){<li> $(this).next ().text('使用者名稱應為3-20位元之間').removeClass('state1').addClass('state2');<li> }).blur(function(){<li> if( $(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){<li> $(this). next().text('輸入成功').removeClass('state1').addClass('state4');<li> ok1=true;<li> }else{<li> $(this).next() .text('使用者名稱應為3-20位元之間').removeClass('state1').addClass('state3');<li> }<li> <li> });<li><li> //驗證密碼<li> $('input[name="password"]').focus(function(){<li> $(this).next().text('密碼應該為6-20位元之間').removeClass('state1').addClass('state2');<li> }).blur(function(){<li> if($(this).val().length >= 6 && $ (this).val().length <=20 && $(this).val()!=''){<li> $(this).next().text('輸入成功').removeClass(' state1').addClass('state4');<li> ok2=true;<li> }else{<li> $(this).next().text('密碼應為6-20位元之間') .removeClass('state1').addClass('state3');<li> }<li> <li> });<li><li> //驗證確認密碼<li> $('input[name=" repass"]').focus(function(){<li> $(this).next().text('輸入的確認密碼要和上面的密碼一致,規則也要相同').removeClass('state1' ).addClass('state2');<li> }).blur(function(){<li> if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){<li> $ (this).next().text('輸入成功').removeClass('state1').addClass('state4');<li> ok3=true;<li> }else{<li> $(this) .next().text('輸入的確認密碼要和上面的密碼一致,規則也要相同').removeClass('state1').addClass('state3');<li> }<li> <li> });<li><li> //驗證信箱<li> $('input[name="email"]').focus(function(){<li> $(this).next().text( '請輸入正確的EMAIL格式').removeClass('state1').addClass('state2');<li> }).blur(function(){<li> if($(this).val(). search(/w ([- .]w )*@w ([-.]w )*.w ([-.]w )*/)==-1){<li> $(this).next( ).text('請輸入正確的EMAIL格式').removeClass('state1').addClass('state3');<li> }else{ <li> $(this).next().text('輸入成功').removeClass('state1').addClass('state4');<li> ok4=true;<li> }<li> <li> });<li><li> //提交按鈕,所有驗證透過方可提交<li><li> $('.submit').click(function(){<li> if(ok1 &&&b2 && ok3 && ok4){<li> $('form').submit ok2 && ok3 && ok4){<li> $('form').submit ok ();<li> }else{<li> return false;<li> }<li> });<li> <🎜> });<li> </script>




 使用者名稱:
 請輸入使用者名稱

 密碼:

 請輸入密碼

 確認密碼:

 請輸入確認密碼

 信箱:

 請輸入信箱