JavaScript简单实现表单提交

来一份辣子鸡丁

已于 2023-04-10 20:31:07 修改

阅读量1.3k

点赞数 1

文章标签： javascript html 前端

于 2023-04-10 19:52:28 首次发布

本文链接：https://blog.csdn.net/weixin_44251179/article/details/130068169

版权

本文介绍了如何在IDEA中创建一个JavaScript项目，包括设置新项目、创建基本的HTML页面结构，定义CSS样式以美化页面，以及编写JavaScript代码进行表单验证和交互。当用户点击提交按钮时，会对用户名和密码进行非空检查，并显示相应的提示信息。此外，还展示了登录成功的模拟效果。

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

1、idea创建JavaScript项目

选择 File，选择 New，然后选择 Project

在这里插入图片描述

选择 Empty Project，然后点 Next

在这里插入图片描述

填写 项目名称，可以点 … 选择项目保存位置，然后点 Finish

在这里插入图片描述

这样就可以创建一个JavaScript项目了。

在这里插入图片描述

2、前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<form action="#" method="post" id="form">

    用户名：<input type="text" name="username" id="username">
    <span id="check_username" class="span_tip"></span><br>
    密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="password">
    <span id="check_password" class="span_tip"></span><br>

    <button type="button" id="submit_btn">提交</button>
</form>
<div id="mask_layer"><span>登录成功！！！</span></div>
<script type="text/javascript" src="js/index.js"></script>
</body>

</html>

3、css部分

body{
    width: 100%;
    height: 100%;
}
#mask_layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    text-align: center;
    vertical-align: center;
    font-size: 30px;
    line-height: 20;
    display: none;
}

4、js部分

let username = document.getElementById("username");
let password = document.getElementById("password");
let checkUsername = document.getElementById("check_username");
let checkPassword = document.getElementById("check_password");
let submitBtn = document.getElementById("submit_btn");
let spanTips = document.getElementsByClassName("span_tip");
let form = document.getElementById("form");
let maskLayer = document.getElementById("mask_layer");

submitBtn.onclick = () => {
    for (let s of spanTips) {
        s.innerText = "";
    }
    if (username.value == "") {
        checkUsername.innerText = "用户名不能为空！";
        checkUsername.style.color = "red";
        return;
    }
    if (password.value == "") {
        checkPassword.innerText = "密码不能为空！";
        checkPassword.style.color = "red";
        return;
    }

    // form.submit();
    maskLayer.style.display = "block";
    window.setTimeout(() => {
        maskLayer.style.display = "none";
    }, 3 * 1000);
}