jQuery Validate实现表单验证

版权声明: https://blog.csdn.net/weixin_40550726/article/details/82937798
<!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>

猜你喜欢

转载自blog.csdn.net/weixin_40550726/article/details/82937798