jquery如何实现表单验证

最新推荐文章于 2024-03-14 07:00:00 发布

原创最新推荐文章于 2024-03-14 07:00:00 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了一个使用HTML、CSS和JavaScript实现的用户注册表单，包括如何利用jQuery和Bootstrap进行样式美化和前端数据验证。文章展示了如何设置表单布局、引入静态资源文件，以及通过validate.js脚本实现对用户名、邮箱、密码等字段的有效性检查。

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

一. html中的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static 'learn/css/bootstrap.css' %}">
    <script src="{% static 'learn/js/jquery-1.12.4.js' %}"></script>
    <script src="{% static 'learn/js/bootstrap.js' %}"></script>
    <script src="{% static 'learn/js/jquery.validate.js' %}"></script>
    <script src="{% static 'learn/js/validate.js' %}"></script>
</head>
<body style="background-color: #9fcdff">
<div style="position: fixed; left: 50%; width:200px; height: 500px; margin-top: -250px; margin-left: -200px; top: 50%;">
<div class="container">
    <form id="form01" action="{% url 'login_handle' %}" role="form" class="form-horizontal" method="post">
        {% csrf_token %}
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名：</label>
            <div class="col-sm-3">
                <input name="username" id="username" type="text" class="form-control" placeholder="username">
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">邮箱：</label>
            <div class="col-sm-3">
                <input name="email" id="email" type="email" class="form-control" placeholder="email">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label">密码：</label>
            <div class="col-sm-3">
                <input id="password" name="password" type="password" class="form-control" placeholder="password">
            </div>
        </div>
        <div class="form-group">
            <label for="confirm_password" class="col-sm-2 control-label">确认密码：</label>
            <div class="col-sm-3">
                <input name="confirm_password" id="confirm_password" type="password" class="form-control" placeholder="confirm_password">
            </div>
        </div>
        <br>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-1">
                <button type="submit" class="btn btn-default">注册</button>
            </div>
            <div class="col-sm-1">
                <button type="submit" class="btn btn-default">登录</button>
            </div>
        </div>
    </form>
</div>
</div>
</body>
</html>



二. validate.js中的代码
$().ready(function () {
    $("#form01").validate({
        rules: {
            username: {
                required: true,
                minlength: 3
            },
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 8
            },
            confirm_password: {
                required: true,
                minlength: 8,
                equalTo: "#password"
            }
        },
        messages: {
            username: {
                required: "请输入姓名",
                minlength: "用户名不能小于3位"
            },
            email: {
                required: "请输入Email地址",
                email: "请输入正确的email地址"
            },
            password: {
                required: "请输入密码",
                minlength: "密码不能小于8个字 符"
            },
            confirm_password: {
                required: "请输入确认密码",
                minlength: "确认密码不能小于8个字符",
                equalTo: "两次输入密码不一致不一致"
            }
        }
    });
});