jQuery Form Validation - 온더테크

Contents

폼 검증 (Form Validation), jQuery 폼 검증은 웹 페이지에서 사용자 입력의 유효성을 검사하는 데 사용됩니다. 유효성 검사는 사용자가 제출한 데이터가 특정 기준을 충족하는지 확인하여 서버로 전송되기 전에 오류를 방지합니다. jQuery를 사용하여 폼 검증을 수행하는 방법을 단계별로 설명하겠습니다.

기본 설정

HTML 폼 생성
먼저, 유효성을 검사할 HTML 폼을 생성합니다. 이 폼은 텍스트 입력 필드, 이메일 입력 필드, 비밀번호 입력 필드 등 다양한 입력 요소를 포함할 수 있습니다.

   <form id="myForm">
     <label for="username">Username:</label>
     <input type="text" id="username" name="username"><br><br>
     <label for="email">Email:</label>
     <input type="text" id="email" name="email"><br><br>
     <label for="password">Password:</label>
     <input type="password" id="password" name="password"><br><br>
     <input type="submit" value="Submit">
   </form>

jQuery 라이브러리 포함
jQuery 폼 검증을 사용하려면 jQuery 라이브러리를 HTML 파일에 포함해야 합니다.

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

폼 검증 구현

기본 유효성 검사
폼이 제출될 때 각 입력 필드의 유효성을 검사하는 jQuery 코드를 작성합니다.

   $(document).ready(function(){
     $("#myForm").submit(function(event){
       // 유효성 검사 플래그
       let isValid = true;

       // 사용자 이름 검증
       if($("#username").val().trim() === "") {
         alert("Username is required.");
         isValid = false;
       }

       // 이메일 검증
       let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
       if(!emailPattern.test($("#email").val().trim())) {
         alert("Enter a valid email address.");
         isValid = false;
       }

       // 비밀번호 검증
       if($("#password").val().trim().length < 6) {
         alert("Password must be at least 6 characters long.");
         isValid = false;
       }

       // 유효하지 않은 경우 폼 제출 방지
       if(!isValid) {
         event.preventDefault();
       }
     });
   });

고급 유효성 검사

jQuery Validation 플러그인 사용
더 복잡한 폼 검증이 필요하다면, jQuery Validation 플러그인을 사용할 수 있습니다. 이 플러그인은 다양한 검증 규칙과 메시지를 쉽게 설정할 수 있는 기능을 제공합니다. 플러그인 포함

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

플러그인 설정

   $(document).ready(function(){
     $("#myForm").validate({
       rules: {
         username: {
           required: true,
           minlength: 3
         },
         email: {
           required: true,
           email: true
         },
         password: {
           required: true,
           minlength: 6
         }
       },
       messages: {
         username: {
           required: "Please enter your username",
           minlength: "Your username must consist of at least 3 characters"
         },
         email: {
           required: "Please enter your email address",
           email: "Please enter a valid email address"
         },
         password: {
           required: "Please provide a password",
           minlength: "Your password must be at least 6 characters long"
         }
       },
       submitHandler: function(form) {
         form.submit();
       }
     });
   });

위 코드는 #myForm 폼에 대한 유효성 검사를 수행합니다. 각 입력 필드에 대해 규칙과 메시지를 설정하고, 모든 규칙이 충족되면 폼을 제출합니다.

이와 같이 jQuery를 사용하여 기본적인 폼 검증부터 고급 검증까지 다양한 방식으로 유효성 검사를 구현할 수 있습니다. 유효성 검사를 통해 사용자가 올바른 데이터를 입력하도록 유도하고, 서버에 잘못된 데이터가 전달되는 것을 방지할 수 있습니다.

Post Views: 147

기본 설정

폼 검증 구현

고급 유효성 검사

Leave a Reply Cancel reply