HTML和Javascript：防止在表单中提交未填写的输入[重复]

Question

所以基本上现在我正在构建一个注册页面，我在 HTML 和 JS 上真的很绿色，我试图阻止用户提交未填充的输入，但我只在 HTML 上添加了一个“必需”标签。因此，现在如果用户在开发者控制台 (f12) 中删除“必需”标签，他们可以提交一个空表单，我该如何防止这种情况发生？我在 javascript 上试过了，但它似乎不起作用：

function Validate() {
    var msg = "",
        fields = document.getElementById("username").getElementsByTagName("input");

    for (var i = 0; i < fields.length; i++) {
        if (fields[i].value == "")
            msg += fields[i].title + ' is required. \n';
    }

    if (msg) {
        alert(msg);
        return false;
    } else
        return true;
}
document.getElementById("username").onkeypress = function(e) {
    var chr = String.fromCharCode(e.which);
    if (" `~!@#$%^&*()-=+_/*-+?.,?><}{[]':;';.,|\"".indexOf(chr) >= 0)
        return false;
};
document.getElementById("password").onkeypress = function(e) {
    var chr = String.fromCharCode(e.which);
    if ("`~!@#$%^&*()-=+_/*-+?.,?><}{[]':;';.,|\"".indexOf(chr) >= 0)
        return false;
};

<form method="POST" onsubmit="return validateform()">
    <h2 class="title"><span style="color:#38d39f;font-family:passion one;">WIN</span><span style="font-family:passion one;">TEKA IoT</span></h2>
    <div class="input-div one">
        <div class="i">
            <i class="fas fa-user"></i>
        </div>
        <div class="div">
            <h5>Username</h5>
            <input type="text" class="input" name="username" autocomplete="off" minlength="3" maxlength="20" id="username" required>
        </div>
    </div>
    <div class="input-div pass">
        <div class="i">
            <i class="fas fa-lock"></i>
        </div>
        <div class="div">
            <h5>Password</h5>
            <input type="password" class="input" name="password" autocomplete="off" minlength="6" maxlength="80" id="password" required>
        </div>
    </div>
    <div class="input-div pass">
        <div class="i">
            <i class="fas fa-lock"></i>
        </div>
        <div class="div">
            <h5>Email</h5>
            <input type="email" class="input" name="email" autocomplete="off" required>
        </div>
    </div>
    <a href="{{ url_for('testai') }}">Already have an account?</a>
    <input type="submit" class="btn" value="Register">
</form>
<script type="text/javascript" src="{{ url_for('static',filename='main.js') }}"></script>

Answer 1

用户始终可以修改前端。您应该在后端检查空请求。您想要实现的是从意外请求中获得额外的安全层，但是想要提交空请求的人会找到方法来做到这一点。
你应该怎么做？
通过检查例如检查后端中的每个字段以查看它是否是空请求。长度，如果小于要求，则可以忽略该请求。