Jquery 實作表單驗證，所有驗證透過方可提交-php教程-PHP中文網

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

WBOY

發布： 2016-07-25 08:50:03

原創

1093 人瀏覽過

小小測試

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>
使用者名稱:

請輸入使用者名稱

密碼:

請輸入密碼

確認密碼:

請輸入確認密碼

信箱:

請輸入信箱

複製程式碼