Jquery는 양식 확인을 구현하며 제출하기 전에 모든 확인을 통과해야 합니다.

작은 테스트

 Reg


 <script></li>
<li> $(function(){</li>
<li>
<li> var ok1=false;</li>
<li> var ok2=false;</li>
<li> var ok3=false;</li>
<li> var ok4=false;</li>
<li> // 사용자 이름 확인</li>
<li> $('input[name="username"]').focus(function( ) {</li>
<li> $(this).next().text('사용자 이름은 3-20자여야 합니다.').removeClass('state1').addClass('state2');</li>
<li> }). function(){</li>
<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). 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().길이 >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $ ('input[name ="password"]').val()){</li>
<li> $(this).next().text('입력 성공').removeClass('state1').addClass('state4' );</li>
<li> ok3=true;</li>
<li> }else{</li>
<li> $(this).next().text('입력한 확인 비밀번호는 위 비밀번호와 일치해야 하며, 규칙도 동일해야 합니다.' ).removeClass('state1').addClass('state3');</li>
<li> }</li>
<li> </li>
<li> });</li>
<li>
<li> //이메일 확인</li>
<li> $('input[name=" email"]').focus(function (){</li>
<li> $(this).next().text('올바른 이메일 형식을 입력하세요.').removeClass('state1').addClass('state2'); </li>
<li> }).blur(function (){</li>
<li> if($(this).val().search(/w ([- .]w )*@w ([-.]w )*.w ([-.]w )*/ )==-1){</li>
<li> $(this).next().text('올바른 이메일 형식을 입력하세요.').removeClass('state1').addClass(' state3');</li>
<li> }else { </li>
<li> $(this).next().text('입력 성공').removeClass('state1').addClass('state4');</li>
<li> ok4=true ;</li>
<li> }</li>
<li> </li>
<li> });</li>
<li>
<li> //제출 버튼, 제출하려면 모든 확인을 통과해야 합니다 </li>
<li>
<li> $('.submit').click(function( ){</li>
<li> if(ok1 && ok2 && ok3 && ok4){</li>
<li> $('form').submit();</li>
<li> }else{</li>
<li> return false;</li>
<li> }</li>
<li> } );</li>
<li> </li>
<li> });</li>
<li> </script>




 사용자 이름:
 사용자 이름을 입력하세요
 비밀번호:
 비밀번호를 입력하세요 />
 비밀번호 확인:
 확인 비밀번호를 입력하세요< ;br/ >
 이메일:
 이메일을 입력하세요< ;br/>