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

Question

我的代码有一个小问题，无法提交表单。一旦我填写了表格并按下提交按钮，什么也没有发生，看起来表格没有被提交。实际上，此代码应检查是否有任何空字段，如果有，则提示一条消息，指示填写字段。如果每个字段都填写完毕，请提交表单。

            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.";

正如您可能注意到的那样，我对此完全是新手。 Aynone 可以引导我走正确的路吗？

编辑:

                    <form class="form-container" name="registerForm" onsubmit="return false">
                    <p><b>Please fill out all fields to register your account</b></p>
                    <div class="form-group">
                        <input type="text" class="form-control" id="username" aria-describedby="username" placeholder="Username" minlength=3 required>
                    </div>

                    <div class="form-group">
                        <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter email" required>
                    </div>

                    <div class="form-group">
                        <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
                    </div>

                    <div class="form-group">
                        <input type="password" class="form-control" id="inputPasswordConfirm" placeholder="Confirm password" required>
                    </div>

                    <div class="form-group">
                        <input type="tel" class="form-control" id="inputNumber" placeholder="Mobile number" pattern="^\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*$" required> 
                    </div>
                        <button type="submit" onclick="storeUser()" class="btn btn-primary regstrbtn">Register</button>
                        <p id="Result"></p>
                        <p id="Warning" style="color: red;"></p>
                </form>

Answer 1

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

1. 无效的电话号码正则表达式:您正在使用以下正则表达式来验证电话号码字段，但它缺少字符:

   ^\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 ^^
   

   (我将忽略正则表达式具有占位符“手机号码”这一事实，但仅接受英国伦敦内外的固定电话号码。)

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

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

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

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

3. 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 子句并在底部添加 return true;，即:

       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;
   

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

5. 如果表单成功填写，您不会清除警告消息。添加行

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

   到函数结束。

   顺便说一下，你有不同的线对

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

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