HTML+jQuery表单操作

￡神魔★判官ぃ 2023-10-06 17:55 38阅读 0赞

## 阻止表单提交 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>用户登录</title>
        <link rel="stylesheet" href="/admin/lib/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="/admin/css/base.css">
    </head>
    
    <body>
        <div class="login-body">
            <div class="login-container">
                <h4 class="title">willem - 博客管理员登录</h4>
                <div class="login">
                    <form action="/login" method="post" id="loginForm">
                        <div class="form-group">
                            <label>邮件</label>
                            <input name="email" type="email" class="form-control" placeholder="请输入邮件地址">
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input name="password" type="password" class="form-control" placeholder="请输入密码">
                        </div>
                        <button type="submit" class="btn btn-primary">登录</button>
                    </form>
                </div>
                <div class="tips"></div>
            </div>
        </div>
        <script src="/admin/lib/jquery/dist/jquery.min.js"></script>
        <script src="/admin/lib/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            // 为表单添加提交事件
            $('#loginForm').on('submit',function(){
          
    
                // 阻止表单默认提交
                return false;
            });
        </script>
    </body>
    </html>

## 三秒后跳转 ##

## 获取提交表单数据 ##

// 获取表单对象的公共方法
    function serializeToJson(form){
        var result = {};
        // 获取到的格式[{name:'email',value:'用户输入的内容'}]
        var f = form.serializeArray();
        // {email:'zhwangsan@qq.com',password:'123456'} 转换成这种格式
        f.forEach(function(item){
            // item.name 相当于 result.email
            result[item.name] = item.value;
        });
        return result;
    }
    
     <script src="/admin/js/common.js"></script>
     <script type="text/javascript">
         // 为表单添加提交事件
         $('#loginForm').on('submit',function(){
          
             // 获取表单中用户输入的内容
             var result = serializeToJson($(this));//传入表单对象
             console.log(result);
             // 如果用户没有输入邮寄地址
             if(result.email.trim().length == 0)
             {
          
                 alert("请输入邮寄地址");
                 return false;
             }
             if(result.password.trim().length == 0)
             {
          
                 alert("请输入密码");
                 return false;
             }
    
         });
     </script>