Jquery引用validate插件表单验证

最新推荐文章于 2019-09-04 19:47:38 发布

zxkzhang

最新推荐文章于 2019-09-04 19:47:38 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

分类专栏：实例代码

本文链接：https://blog.youkuaiyun.com/zxkzhang/article/details/100528944

实例代码专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用jQuery插件进行表单验证的实例，包括用户名、密码及确认密码的验证规则，确保用户输入符合要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用插件验证

<script src="js/jquery-3.4.0.js"></script> 
<script src="js/jquery.validate.js"></script> 
<script src="js/messages_zh.js"></script>

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        form{
            border: 1px solid black;
            margin: auto;
            width: 1000px;
            height: 600px;
        }
        label{
            text-align: right;
            display: inline-block;
            height: 50px;
            width: 200px;
        }
    </style>

    <script src="js/jquery-3.4.0.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/messages_zh.js"></script>

    <script>
        $(function () {
            $("form").validate({
                    rules:{
                        user:{
                            minlength:2,
                            required:"true"
                        },
                        pwd:{
                            minlength:4,
                            required:"true"
                        },
                        repwd:{
                            equalTo:("#pwd")
                        }
                    },
                manage:{
                    user:{
                        minlength:"你是一个小气的人"
                    },
                    pwd:{
                        minlength:"你是一个小气的人"
                    },
                    repwd:{
                        equalTo:"放大你的眼"
                    }
                }
            }

            )
        })
    </script>

</head>
<body>
<form action="01二级联动.html" method="get">
    <label for="user">用户名</label>
    <input type="text" name="user" id="user"><br>

    <label for="pwd">密码</label>
    <input type="password" name="pwd" id="pwd"><br>

    <label for="repwd">确认密码</label>
    <input type="password" name="repwd" id="repwd"><br>

    <input type="submit" value="提交" >
</form>
</body>
</html>