jQuery實現表單驗證

阿新 • • 發佈：2021-06-19

使用jquery實現表單驗證，供大家參考，具體內容如下

<!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();
     xiFlKvHs 
       // 2.判斷非空並返回校驗是否通過
            if (typeof birthday == "undefined" || birthday == null || birthday == "") {
                $("#name").css("border","");
                return true;
            }
        }
 
        // 進行校驗
        $(function () {
            //當表單提交時，呼叫所有的校驗方法
            $("#registerForm").submit(function () {
                // 如果這個方法沒有返回值，或者返回為true，則表單提交，如果返回為false，則表單不提交
                // 1.傳送資料到伺服器
                if (checkUsername() && checkPassword() && ch 
程式設計客棧eckEmail() && 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>
    xiFlKvHs            <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.java

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,IOException {
       程式設計客棧 this.doGet(req,resp);
    }
}

效果：

jQuery實現表單驗證

本節程式碼地址：Demo

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

jQuery實現表單驗證

使用jquery實現表單驗證，供大家參考，具體內容如下 register.html <!DOCTYPE html>

jQuery實現表單驗證功能

表單驗證例項 / 包含使用者名稱、密碼、住址、郵箱驗證如下圖別忘了引入jQuery框架！！！

JavaScript實現表單驗證功能

本文例項為大家分享了JavaScript實現表單驗證功能的具體程式碼，供大家參考，具體內容如下

vue使用element-ui實現表單驗證

本文例項為大家分享了vue使用element-ui實現表單驗證的具體程式碼，供大家參考，具體內容如下

表單驗證_純CSS實現表單驗證

技術標籤：表單驗證首發：krissarea.gitee.io(https://krissarea.gitee.io/blog/css/others/css-form-validation.html)作者：陳大魚頭(https://juejin.im/user/576b433bd342d30057aaa1e9/posts)github：KRI