jQuery Validate:簡單驗證表單欄位資料格式的解決方案

2022/02/09 1,550 3 網站技術 , HTML , JavaScript , jQuery

jQuery Validate 是一個歷史悠久的 jQuery 套件,始於西元 2006 年 7 月,因此有許多網站都有使用到這個套件,它可以幫助開發者設計表單欄位資料驗證方法,也能直接使用其預設的驗證格式,如:必填、指定字元長度、E-mail 格式、URL 格式、日期格式、資料一致性、整數等,且能在使用者輸入後及提交時提供相關提示文字,提升使用者體驗,由於是元老級的套件,網路上的相關教學也是非常多,非常推薦新手入門嘗試及學習喔!

這次我簡單看了官方提供的 DEMO 頁面,模仿寫出了簡單的使用者註冊頁面,欄位分別有姓名、帳號、密碼、確認密碼、E-mail、URL 及個人簡介,分別依照個別欄位屬性添加相關驗證方法,如:名字必填且至少兩個字、密碼要 6 至 12 字元,確認密碼必須跟密碼相同等,使用者輸入後就會馬上知道自己為何無法提交了!這套件還可以用在很多地方,等著你去理解、善用囉!

CodePen

See the Pen
jQuery Validate:簡單驗證表單欄位資料格式的解決方案
by Feng, Cheng-Chi (@qwe987299)
on CodePen.

範例完整原始碼

<!DOCTYPE html>
<html lang="zh-tw">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Validate 測試用</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
    <style>
        #TestForm {
            width: 400px;
            font-size: 15px;
        }

        #TestForm p {
            margin: 5px 0;
        }

        #TestForm input {
            margin: 5px 0;
        }

        #TestForm label.error {
            font-size: 14px;
            margin-left: 10px;
            color: red;
        }
    </style>
    <script>
        $.validator.setDefaults({
            submitHandler: function () {
                alert("成功提交!");
            }
        });

        $().ready(function () {


            // 在輸入後及提交時驗證表單欄位是否格式正確
            $("#TestForm").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 2
                    },
                    username: {
                        required: true,
                        range: [6, 12]
                    },
                    password: {
                        required: true,
                        minlength: 6
                    },
                    confirm_password: {
                        required: true,
                        minlength: 6,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    name: {
                        required: "姓名為必填",
                        minlength: "姓名至少要有兩個字"
                    },
                    username: {
                        required: "帳號為必填",
                        range: $.validator.format("您的帳號必須 {0} 到 {1} 個字元")
                    },
                    password: {
                        required: "密碼為必填",
                        minlength: $.validator.format("您的密碼必須至少 {0} 個字元")
                    },
                    confirm_password: {
                        required: "確認密碼為必填",
                        minlength: $.validator.format("您的密碼必須至少 {0} 個字元"),
                        equalTo: "請輸入與以上一樣的密碼"
                    },
                    email: "請輸入正確的 E-mail 地址"
                }
            });

        });
    </script>
</head>

<body>
    <form class="cmxform" id="TestForm" method="get" action="">
        <fieldset>
            <legend>請提供以下資料:(jQuery Validate 測試用)</legend>
            <p>
                <label for="name">姓名 (必填)</label><br>
                <input id="name" name="name" type="text" required>
            </p>
            <p>
                <label for="username">帳號 (必填)</label><br>
                <input id="username" name="username" type="text" required>
            </p>
            <p>
                <label for="password">密碼 (必填)</label><br>
                <input id="password" name="password" type="password">
            </p>
            <p>
                <label for="confirm_password">確認密碼 (必填)</label><br>
                <input id="confirm_password" name="confirm_password" type="password">
            </p>
            <p>
                <label for="cemail">E-mail (必填)</label><br>
                <input id="cemail" type="email" name="email" required>
            </p>
            <p>
                <label for="curl">URL (可選)</label><br>
                <input id="curl" type="url" name="url">
            </p>
            <p>
                <label for="introduction">個人簡介 (可選)</label><br>
                <textarea id="introduction" name="introduction"></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="提交">
            </p>
        </fieldset>
    </form>
</body>

</html>

※ 這裡採用 CDN。


▲ 精選圖片。

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇