jQuery插件——表单验证（jquery.validate.js）

最新推荐文章于 2022-11-13 11:34:52 发布

sfwgho

最新推荐文章于 2022-11-13 11:34:52 发布

阅读量1.7k

点赞数

分类专栏： plugin 表单验证 form jQuery validate 文章标签： jquery jquery插件表单

本文链接：https://blog.csdn.net/u012124764/article/details/50180511

版权

jQuery 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

表单验证

1 篇文章 0 订阅

订阅专栏

form

1 篇文章 0 订阅

订阅专栏

HTML

<form id="loginForm">
    <label class="form__label--hidden" for="username">用户名:</label>
    <input class="form__input" type="text" id="username" name="username" placeholder="用户名">
    <label class="form__label--hidden" for="password">密码:</label>
    <input class="form__input" type="password" id="password" name="password" placeholder="密码">
    <input class="form__btn" type="submit" value="登录">
</form>

<script src="js/jquery-1.7.1.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
    $('#loginForm').validate({
        rules: {
            username: {
                required: true,
                minlength: 6,
                maxlength: 16
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 16
            }
        },
        messages: {
            username: {
                required: "必须填写用户名！",
                minlength: "用户名长度不能小于6位！",
                maxlength: "用户名长度不能大于16位！"
            },
            password: {
                required: "必须填写密码！",
                minlength: "密码长度不能小于6位！",
                maxlength: "密码长度不能大于16位！"
            }
        }
    });
});       
</script>