Javascript无法提交带有空字段验证的表单

我有一个小问题，我的代码没有提交我的表格。一旦我填写了表格并按下提交按钮，什么都不会发生，似乎表格没有被提交。实际上，这段代码应该检查是否有空字段，如果有，它会提示一条消息，指示填写字段。如果每个字段都已填写，请提交表格

            function storeUser() {
            var userObject = {};

            userObject.username = document.getElementById("username").value;
            userObject.email = document.getElementById("inputEmail").value;
            userObject.password = document.getElementById("inputPassword").value;
            userObject.passwordConfirm = document.getElementById("inputPasswordConfirm").value;
            userObject.mobileNumber = document.getElementById("inputNumber").value;
            userObject.score = 0;

            if (userObject.password !== userObject.passwordConfirm) {
                document.getElementById("Warning").innerHTML = "Your password doesn't match.";  
                return false;
            }

            if (userObject.username === "") {
                document.getElementById("Warning").innerHTML = "";
                document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
            } 
            if (userObject.email === " " ) {
                document.getElementById("Warning").innerHTML = "";
                document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
            } 
            if (userObject.password === " ") {
                document.getElementById("Warning").innerHTML = "";
                document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
            } 
            if (userObject.passwordConfirm === " ") {
                document.getElementById("Warning").innerHTML = "";
                document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
            } 
            if (userObject.mobileNumber === " ") {
                document.getElementById("Warning").innerHTML = "";
                document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
                return false;
            }
            else {
                return true;
            }

            localStorage[userObject.email] = JSON.stringify(userObject);

            document.getElementById("Result").innerHTML = "Success! You have registered your account.";

你可能已经注意到了，我对这方面完全是个新手。艾诺能指引我正确的方向吗

编辑：

---

您可以使用HTML5表单字段验证器简单地管理它，请查找以下代码段：

身体{ 字体系列：Helvetica，Arial； 字体大小：12px； } h1{ 字体大小：200%； } 传奇{ 填充：0 5px； 文本对齐：右对齐； } 字段集>div{ 利润率：10px0； } 字段集>图例+div{ 边际上限：0； } 字段集>div：最后一个子项{ 页边距底部：0； } 标签{ 显示：内联块； 宽度：100px； } 输入{ 宽度：200px； } 输入[类型=数字]{ 宽度：30px； } div>输入[类型=提交]{ 背景：ccc； 边框：1px实心999； 宽度：自动； } 输入：必选{ 背景：hsl180，50%，90%； 边框：1px实心999； } 输入：可选{ 背景：hsl300，50%，90%； 边框：1px点hsl180，50%，90%； } 输入：有效， 输入：在范围内{ 背景：hsl120、50%、90%； 边框颜色：hsl120、50%、50%； } 输入：无效， 输入：超出范围{ 边框颜色：hsl0、50%、50%； 背景：hsl0，50%，90%； } .救命{ 显示：无； 字体大小：90%； } 输入：focus+。帮助{ 显示：内联块； } 提交{ 左边距：100px； } 预订详情 姓名： 格式：firstname lastname 电邮： 网站： 门票数量：

---

查看您的代码，我发现了一些问题：

电话号码regexp无效：您正在使用以下regexp验证电话号码字段，但缺少字符：

^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$
//               missing ] after 0-9 ^^

我将忽略一个事实，正则表达式有占位符“Mobile number”，但只接受英国伦敦内外的固定电话号码

如果电子邮件、密码、确认密码和电话号码字段包含单个空格，则显示验证错误消息：

 if (userObject.email === " " ) {

您可能希望将这些值与空字符串进行比较：

 if (userObject.email === "" ) {

storeUser函数的结尾如下所示：

    if (userObject.mobileNumber === " ") {
        document.getElementById("Warning").innerHTML = "";
        document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
        return false;
    }
    else {
        return true;
    }

    localStorage[userObject.email] = JSON.stringify(userObject);

    document.getElementById("Result").innerHTML = "Success! You have registered your account.";

我们什么时候到达最后两行，一行写入本地存储，另一行显示成功消息

如果电话号码字段包含一个空格，则会出现警告消息，函数返回false。 如果电话号码字段不包含单个空格，则函数返回true。 最后两行是无法到达的。它们永远不会执行，因为函数在到达它们之前返回

您可能想要做的是去掉else子句并添加returntrue；在底部，即：

    if (userObject.mobileNumber === " ") {
        document.getElementById("Warning").innerHTML = "";
        document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
        return false;
    }

    localStorage[userObject.email] = JSON.stringify(userObject);

    document.getElementById("Result").innerHTML = "Success! You have registered your account.";
    return true;

不一致地使用return false；。如果密码不匹配，或者没有填写电话号码字段，则函数返回false。没有相应的返回值为false；用于用户名、电子邮件、密码和确认密码字段的行。为每个字段添加此行

如果表单成功完成，则不会清除警告消息。添加行

document.getElementById("Warning").innerHTML = "";

直到你的功能结束

顺便说一句，你有很多对线

        document.getElementById("Warning").innerHTML = "";
        document.getElementById("Warning").innerHTML = "Please fill out the form fully!";

但是每对中的第一行是不必要的，因为分配给警告元素的内部HTML的空字符串值立即被分配给第二行的警告消息所替换。您可以删除每一对的第一行

---

请为表单添加标记。谢谢。另外值得注意的是：如果userObject.username==，您不需要检查类型，您只需将所需的独立属性添加到您的中。@RouninsaysJesuisMonica我希望同时使用HTML“required”标记和javascript。在这种情况下，请看一下reportValidity和感谢您的贡献，但这不是我想要的。我想使用上面使用的javascript验证。非常感谢您的见解。我不仅设法纠正了我的错误，而且还学到了一些新的常识。

        document.getElementById("Warning").innerHTML = "";
        document.getElementById("Warning").innerHTML = "Please fill out the form fully!";