jquery-validation实现表单验证

最新推荐文章于 2024-01-26 10:05:23 发布

你好，未来的我

最新推荐文章于 2024-01-26 10:05:23 发布

阅读量1.2k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/lidongkui123/article/details/80345437

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script type="text/javascript" src="../js2/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="../js2/jquery.validate.js"></script>
    <script>
        $(document).ready(function () {
            $("#demoForm").validate({
                rules: {
                    //name选择
                    "username": {
                        required: true,
                        minlength: 3,
                        maxlength: 10,
                        //远程校验
                        remote: "validation.json"
                    },

                    password: {
                        required: true,
                        minlength: 6,
                        maxlength: 12
                    },

                    "confirm-password": {
                        required: true,
                        equalTo: "#password"
                    }
                },
                messages: {
                    "username": {
                        required: "用户名必须填写",
                        minlength: "用户名长度至少3位",
                        maxlength: "用户名长度至多10位",
                        remote: "该用户名已占用"
                    },
                    password: {
                        required: "密码不能为空",
                        minlength: "用户密码长度至少6位",
                        maxlength: "用户密码长度至多12位"
                    },
                    "confirm-password": {
                        required: "确认密码不能为空",
                        equalTo: "确认密码与密码不一致"
                    }
                }
            })

        })
    </script>
    
</head>
<body>
<form id="demoForm">
    <fieldset>
        <legend>用户登录</legend>
        <p id="info"></p>
        <p id="info2" style="display: none">输入错误</p>
        <p>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username"/>
        </p>

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

        <p>
            <label for="confirm-password">确认密码</label>
            <input type="password" id="confirm-password" name="confirm-password"/>
        </p>

        <p>
            <button id="check">检查表单</button>
        </p>
        <p>
            <input type="submit" value="登录"/>
        </p>
    </fieldset>
</form>
</body>
</html>

你好，未来的我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-validation实现表单验证

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单验证&lt;/title&gt; &lt;script type="text/javascript" src=&quot
复制链接

扫一扫