jQuery 폼 검증 실현

12330 단어 jQuery폼 검증
jQuery 를 사용 하여 폼 검증 을 실현 합 니 다.참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  </title>
    <!--  jQuery-->
    <script src="js/jquery-3.3.1.js"></script>
    <!--      -->
    <script>
        /*
        :
     1.   :    ,  8 20 
     2.  :    ,  8 20 
     3.email:    
     4.  :  
     5.   :     
     6.    :  
  */
 
        //      
        //     ,  8 20 
        function checkUsername() {
            // 1.      
            var username = $("#username").val();
            // 2.      
            var reg_username = /^\w{8,20}$/;
            // 3.          ,       
            var flag = reg_username.test(username);
            if (flag) {
                //      
                $("#username").css("border", "");
            } else {
                //      ,       
                $("#username").css("border", "1px solid red");
            }
            // 4.        
            return flag;
        }
 
        //     
        function checkPassword() {
            //1.     
            var password = $("#password").val();
            //2.    
            var reg_password = /^\w{8,20}$/;
            //3.  ,      
            var flag = reg_password.test(password);
            if (flag) {
                //    
                $("#password").css("border", "");
            } else {
                //    ,       
                $("#password").css("border", "1px solid red");
            }
            // 4.        
            return flag;
        }
 
        //     
        function checkEmail() {
            //1.    
            var email = $("#email").val();
            //2.      [email protected]
            var reg_email = /^\w+@\w+\.\w+$/;
            //3.  
            var flag = reg_email.test(email);
            if (flag) {
                $("#email").css("border", "");
            } else {
                $("#email").css("border", "1px solid red");
            }
            // 4.        
            return flag;
        }
 
        //     
        function checkName() {
            // 1.    
            var name = $("#name").val();
            // 2.             
            if (typeof name == "undefined" || name == null || name == "") {
                $("#name").css("border", "1px solid red");
                return false;
            } else {
                $("#name").css("border", "");
                return true;
            }
        }
 
        //      
        function checkTelephone() {
            // 1.     
            var telephone = $("#telephone").val();
            // 2.    
            var reg_tel = /^1(3|4|5|6|7|8|9)\d{9}$/;
            // 3.  
            var flag = reg_tel.test(telephone);
            if (flag) {
                $("#telephone").css("border", "");
            } else {
                $("#telephone").css("border", "1px solid red");
            }
            // 4.        
            return flag;
        }
 
        //       
        function checkBirthday() {
            // 1.      
            var birthday = $("#birthday").val();
            // 2.             
            if (typeof birthday == "undefined" || birthday == null || birthday == "") {
                $("#name").css("border", "1px solid red");
                return false;
            } else {
                $("#name").css("border", "");
                return true;
            }
        }
 
        //     
        $(function () {
            //      ,         
            $("#registerForm").submit(function () {
                //            ,     true,     ,     false,      
                // 1.        
                if (checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone() && checkBirthday()) {
                    //     ,  ajax  ,          username=zhangsan&password=123
                    $.post("registerServlet", $(this).serialize(), function (data) {
                        if (data.flag) {
                            //     ,       
                            alert("    !");
                        } else {
                            //    , errorMsg      
                            $("#errorMsg").html(data.errorMsg);
                        }
                    });
                }
                //2.      
                return false;
            });
            //           ,         
            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);
            $("#name").blur(checkName);
            $("#telephone").blur(checkTelephone);
            $("#birthday").blur(checkBirthday);
        })
    </script>
</head>
<body>
<div>
    <p>    </p>
    <!--    -->
    <div id="errorMsg" style="color:red;text-align: center"></div>
    <form id="registerForm" action="registerServlet" method="post">
        <table style="margin-top: 25px;">
            <tr>
                <td class="td_left">
                    <label for="username">   </label>
                </td>
                <td class="td_right">
                    <input type="text" id="username" name="username" placeholder="     ">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="password">  </label>
                </td>
                <td class="td_right">
                    <input type="text" id="password" name="password" placeholder="     ">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="email">Email</label>
                </td>
                <td class="td_right">
                    <input type="text" id="email" name="email" placeholder="   Email">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="name">  </label>
                </td>
                <td class="td_right">
                    <input type="text" id="name" name="name" placeholder="       ">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="telephone">   </label>
                </td>
                <td class="td_right">
                    <input type="text" id="telephone" name="telephone" placeholder="        ">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="sex">  </label>
                </td>
                <td class="td_right gender">
                    <input type="radio" id="sex" name="sex" value=" " checked>  
                    <input type="radio" name="sex" value=" ">  
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="birthday">    </label>
                </td>
                <td class="td_right">
                    <input type="date" id="birthday" name="birthday" placeholder=" / / ">
                </td>
            </tr>
            <tr>
                <td class="td_left">
                </td>
                <td class="td_right check">
                    <input type="submit" class="submit" value="  ">
                    <span id="msg" style="color: red;"></span>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
<script>
 
</script>
</html>
백 엔 드 처리 코드 도 보지 않 아 도 되 고 앞 뒤 만 상호작용 이 필요 합 니 다.RegisterServlet.자바

package com.demo.servlet;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;
 
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Map<String, String[]> parameterMap = req.getParameterMap();
        Set<String> keySet = parameterMap.keySet();
        Iterator<String> iterator = keySet.iterator();
        while (iterator.hasNext()) {
            String key = iterator.next();
            System.out.println(key + ":" + parameterMap.get(key)[0]);
        }
//        String str="{flag:true,errorMsg:'    '}";//     
        String str="{\"flag\":\"true\",\"errorMsg\":\"    \"}";
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().print(str);
    }
 
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}
효과:

이 절 코드 주소:Demo
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기