新手如何使用原生JS实现空值校验登录窗口

• 创建一个 HTML 页面：

1. 在 Java 项目的 resouce/static 目录下创建一个 component 文件夹
2. 对准刚刚新建的文件夹鼠标右键 New，然后选择 HTML FILE，最后键入名字即可创建一个新的 HTML 文件

• 实现登录窗口需要知道的三个区域：

1. CSS 区域：一般 css 代码我们可以直接在标签上写，不过这种对于单个标签大量 css 样式来说，不太美观；或者在 head 标签里创建一个 style 标签，然后在 style 标签里引用当前页面的 class 或 id 或 标签来写 css 样式；或者当前页面 style 中已经不能满足我们的 css 语句存放时，可以在 Java 项目的 resource/static 目录下创建一个 css 文件夹，然后创建一个 Stylesheet CSS 类型的文件，并与需要移植的 HTML 页面名称一致，然后将需要移植 HTML 页面中的 style 标签里的 css 样式全部移植过去，最后在 HTML 页面的 head 标签里引入 css 文件：<link href="xx.css" type="text/css" rel="stylesheet">。
2. body 区域：这里是我们真正写 HTML 标签的地方；
3. script 区域：在 body 的 close 标签下创建一个 script 标签，type 选择 text/javascript。

• CSS 代码：

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        background: #DDDDDD;
    }
    .login-outer-wrap {
        position: relative;
        height: 100%;
    }
    .login-panel{
        width: 400px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 46%;
        margin-top: -150px;
        margin-left: -200px;
    }
    .form-item {
        float: right;
        clear: both;
        margin-top: 10px;
    }
    label {
        display: block;
        float: left;
        height: 42px;
        width: 65px;
        margin-right: 10px;
        line-height: 42px;
        font-size: 14px;
        color: #666;
        font-weight: 700;
        text-align: right;
    }
    input.form-item-input {
        display: block;
        position: relative;
        float: left;
        height: 10px;
        width: 228px;
        padding: 11px 10px;
        margin-right: 10px;
        border: 1px solid #ddd;
        font-size: 14px;
        color: #666;
        transition: .3s;
    }
    input#submit {
        position: relative;
        margin-right: 10px;
        color: #666;
        transition: .3s;
        cursor: pointer;
    }
    p {
        display: block;
    }
    p, .warn-tip {
        margin: 0;
        padding: 0;
    }
    .warn-tip {
        font-size: 14px;
        color: red;
        display: none;
    }
</style>

• HTML 代码

<div class="login-outer-wrap">
    <form class="login-panel">

        <p class="form-item">
            <label for="username">用户名：</label>
            <input onblur="warnTipByInputChange(this)" class="form-item-input" id="username">
            <span class="warn-tip">用户名是必填项！</span>
        </p>
        <p class="form-item">
            <label for="password">密码：</label>
            <input onblur="warnTipByInputChange(this)" class="form-item-input" id="password">
            <span class="warn-tip">密码是必填项！</span>
        </p>
        <p class="form-item">
            <input disabled id="submit" value="提交" type="button"/>
        </p>
    </form>
</div>

• JavaScript 代码

<script type="text/javascript">
    window.onload = function() {
        checkNoEmpty();
    };
    warnTipByInputChange = function (th) {
        const childNodes = th.parentNode.childNodes;
        let n;
        for (const node of childNodes) {
            if (node instanceof  HTMLElement) { n = node; }
        }
        n.style.display = th.value.trim().length ? 'none' : 'block';
        checkNoEmpty();
    };

    checkNoEmpty = function () {
        const clz = document.getElementsByClassName("form-item-input");
        for (const node of clz) {
            if (!node.value.trim().length) {
                document.getElementById("submit").setAttribute('disabled', true);
                return;
            }
        }
        document.getElementById("submit").removeAttribute('disabled');
    }
</script>