jQuery_jquery를 기반으로 양식 제출 확인 구현

html 양식 코드:

코드 복사 코드는 다음과 같습니다.

<form method="post" action=""> >                  <label for="username">사용자 이름: </label>               <input type="text" id="username" class="required"/> > >                                            <label for="username">이메일: </label>                <input type="text" id="email" class="required"/> > >                               <label for="username">프로필: </label>                                        <input type="text" id="personinfo"/> > >                 <input type="submit" value="submit" id="send"/>                                        <input type="reset" id="res"/> > </양식>


jQuery 코드:




코드 복사


코드는 다음과 같습니다.

             $(함수(){
                $("form :input.required").each(function(){
              var $required = $("<strong class='high'>*</strong>")
//$(this).parent().append($required); //문서에 추가
                     $(this).parent().prepend($required)
              })
                 $('form :input').blur(function(){
              var $parent = $(this).parent()
If($(this).is('#사용자 이름')){
If(this.value==""||this.value.length<6){
>
                                 $parent.append('<span class="formtips onError">' errorMsg '</span>');                           }else{
~ ~                     var okMsg = '올바른 입력'
                                 $parent.append('<span class="formtips onSuccess">' okMsg '</span>'); ~ ~ If($(this).is('#email')){
if(this.value==""||(this.value!=""
&&!/. @. .[a-zA-Z]{2,4}$/.test(this.value
))){
                                var errorMsg = '올바른 이메일 주소를 입력하세요.'
$parent.append('<span class="formtips onError">' errorMsg '</span>'); ~                                              ~ ~              var okMsg = '올바른 입력';                                    $parent.append('<span class="formtips onSuccess">' okMsg '</span>'); ~                                                 ~               })                 $("form :input").focus(function(){               var $parent = $(this).parent()
                      $parent.find(".formtips").remove()
              })
                 $("#send").click(function(){
              var $parent = $(this).parent().parent()
                    $parent.find(".formtips").remove()
                     $("form .required:input").trigger('blur')
              var numError = $('form .onError').length
If(numError){
                        거짓 반환
~               })
                 $("#res").click(function(){
              var $parent = $(this).parent().parent()
                      $parent.find(".formtips").remove()
              })
        });

코드는 매우 간단하고 이해하기 쉽습니다. 여기서는 자세히 설명하지 않겠습니다.