1. 程式人生 > >jQuery Validate實現表單驗證

jQuery Validate實現表單驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用 jQuery validate 表單驗證</title>
    <script src="../scripts/jquery-3.3.1.min.js"></script> <!--匯入本地js庫-->
    <script src="../scripts/jquery.validate.min.js"></script>
    <script src="../scripts/messages_zh.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#form1").validate({
                rules:{  //校驗規則
                    userName:{
                        required: true,
                        minlength: 2
                    },
                    email:{
                        required:true
                    },
                    password:{
                        required: true,
                        minlength: 5
                    }
                } ,
                messages:{ //提示
                    userName:{
                        required: "請輸入使用者名稱",
                        minlength: "使用者名稱必需由兩個字母組成"
                    },
                    email:{
                      required:"請輸入郵箱地址"
                    },
                    password:{
                        required: "請輸入密碼",
                        minlength: "密碼長度不能小於 5 個字母"
                    }
                }
            });
        });
    </script>
</head>
<body>
<form id="form1" action="#">
    <input type="text" id="userName" class="userName" name="userName"><br>
    <input type="email" id="email" name="email"><br>
    <input type="password" id="password" class="password" name="password"><br>
    <input type="submit" value="login">
</form>
</body>
</html>