这是表单的代码，涉及输入验证。如何让JS代码正常运行？

Question

这是一个使用表单验证的网站，如果输入有效，则不应禁用该按钮。 如果输入无效，则应禁用该按钮。 直到我添加了验证代码（JS 注释），一切正常并且数据被输入到表中，但发布验证后，它不起作用。

这是代码：

<html>
          <head>
               <title>Table Append w/ User Input</title>
               <script lang="JavaScript">
                    function MainJS(){
                         const submit = document.getElementById('submitbutton');
                         const fullnameVal = document.getElementById('fullname');
                         const UIDVal = getElementById('userID');
                         const regVal = getElementById('regiment');
                         const RegForm = document.getElementById('RegisterForm');

                         fullnameVal.addEventListener('keyup', function() {
                              isValidfullname = fullnameVal.checkValidity();
                              if (isValidfullname == true) {
                                   submit.disabled = false;
                              } else {
                                   submit.disabled = true;
                              }
                         });

                         UIDVal.addEventListener('keyup', function() {
                              isValidUID = UIDVal.checkValidity();
                              if (isValidregiment||isValidfullname||isValidUID) {
                                   submit.disabled = false;
                              } else {
                                   submit.disabled = true;
                              }
                         });

                         regVal.addEventListener('keyup', function() {
                              isValidregiment = regVal.checkValidity();
                              if (isValidregimentVal||isValidfullnameVal||isValidUIDVal){
                                   submit.disabled = false;
                              } else {
                                   submit.disabled = true;
                              }
                         });

                         submit.addEventListener('click', function() {
                              RegForm.submit();
                         });

                         function fillTable(){
                              var table = document.getElementById("myTable");
                              var row = table.insertRow(1);
                              var cell1 = row.insertCell(0);
                              var cell2 = row.insertCell(1);
                              var cell3 = row.insertCell(2);
                              var cell4 = row.insertCell(3);
                              var cell5 = row.insertCell(4);
                              var cell6 = row.insertCell(5);
                              cell1.innerHTML = document.getElementById("userID").value;
                              cell2.innerHTML = document.getElementById("fullname").value;
                              cell3.innerHTML = document.getElementById("rank").value;
                              cell4.innerHTML = document.getElementById("regiment").value;
                              cell5.innerHTML = document.getElementById("branch").value;
                              cell6.innerHTML = document.getElementById("reason").value;
                              return false;
                         }
                    }
               </script>
               <link href="stylesheetone.css" type="text/css" rel="stylesheet">
          </head>
          <body style="background-color:#8ed2e8;color:#fff;" onload="MainJS()">
               <div id="P1">
                    <h2 style="text-align: center;" class="x">New Age Veteran Help Center</h2>
               </div>
               <h2>Who We Are: </h2>
               <p style="font-family:Arial;">
                    &nbsp&nbsp&nbsp&nbsp We are New Age, and we want to create a better life for those who dedicated their lives to protecting our country.
               We have joined up with hundreds of companies across the nation to make <i>your</i> life better. sign up now for an entry to a better life.
               Submit your request, and within 72 hours, we will link you up with companies across the nation. <br><p style="font-family: Arial;font-weight: bold;text-align: center;">Welcome to a New Age.</p>
               </p>
               <p style="margin-top:75px;text-align:center;" >
                    <a href="#Form">Register Now!</a>
                    <a href="#Table">View Database</a>
               </p>
               <p class="spacer">p</p>
               <div id="Form">
                <form action="" onsubmit="return MainJS();" id="RegisterForm">
                    <p>User ID:</p><input type="text" id ="userID" pattern="[0-9]{2,6}" required/><br><br>
                    <p>Email:</p><input type="email" id ="fullname" required/><br><br>
                    <p>Regiment:</p><input type="text" id="regiment" pattern="[0-9]{1,3}" required/>
                    <p class="minispacer">p</p>
                    <p>Rank:
                         <select id="rank" required>
                              <option value="Private">Private</option>
                              <option value="Sergeant">Sergeant</option>
                              <option value="Major">Major</option>
                              <option value="General">General</option>
                         </select>
                    </p>
                    <p class="minispacer">p</p>
                    <p>Branch: 
                    <select id="branch" required>
                         <option value="">Your Branch: </option>
                         <option value="Army">Army</option>
                         <option value="Marines">Marines</option>
                         <option value="Air Force">Air Force</option>
                         <option value="Navy">Navy</option>
                         <option value="Coast Guard">Coast Guard</option>
                    </select>
                    </p>
                    <br>
                    <br>
                    <p>Why Are You Here?
                         <select id="reason">
                              <option value="">Why are You Here? </option>
                              <option value="Job Opportunities">Job Opportunities</option>
                              <option value="Healthcare">Healthcare</option>
                              <option value="Pastimes">Pastimes</option>
                              <option value="Housing">Housing</option>
                              <option value="Impairment">Impairment</option>
                         </select>
                    </p>
                    <br>
                    <br>
                    <button id="submitbutton">Submit</button>
               </form>
               </div>
               <a href="#Table">View The Output</a>
               <a href="#P1">Return To The Main Page</a>
               <p class="spacer">hello</p>
               <div id="Table">
               <table class="table" id = "myTable" style="margin-left:auto;margin-right:auto;">
                    <tr>
                         <th>ID</th>
                         <th>Name</th>
                         <th>Rank</th>
                         <th>Regiment</th>
                         <th>Branch</th>
                         <th>Reason</th>
                    </tr>
               </table>
               </div>
               <div style="margin:100px;text-align: center;">
               <a href="#Form">Go Back</a>
               <br>
               <br>
               <br>
               <a href="#P1">Return To The Main Page</a>
               </div>
          </body>

function fillTable()是函数式 JS。 MainJS()所有其他 JS 都是导致问题的原因。

Answer 1

在您的代码中发现了一些错误，它们是

const UIDVal = getElementById('userID');
const regVal = getElementById('regiment');

您不能单独使用getElementById ，它需要作为元素的方法调用，例如document或其他一些 js 元素。 所以应该改成

const UIDVal = document.getElementById('userID');
const regVal = document.getElementById('regiment');

另一个问题是未定义的变量isValidUID 、 isValidfullname和isValidregiment 。 你试图使用它们而不先声明它们。 所以在脚本的开头，声明它们。

var isValidregiment = false;
var isValidUID = false;
var isValidfullname = false;

此外，在所有输入都有效之前，您不应删除禁用状态，因此您应该使用&&而不是||检查 .

if (isValidregimentVal && isValidfullnameVal && isValidUIDVal){
    submit.disabled = false;
} else {
    submit.disabled = true;
}

在您的fullnameVal.addEventlistener ，您只检查isValidfullnameVal这还不够。 您应该检查所有 3 个条件，就像您为其他检查编写的代码一样。

最后，将按钮设置为默认禁用，否则用户可以在未输入任何内容或页面重新加载后提交表单。

<button id="submitbutton" disabled>Submit</button>

当我们在做的时候，为什么不直接使用type=submit而不是添加一个事件监听器来检查提交

<button type="submit" disabled>Submit</button>

如果您想在提交时填充表格，请使用带有preventDefault的submit事件并在那里调用您的fillTable函数

这是表单的代码，涉及输入验证。如何让JS代码正常运行？

问题描述

1 个解决方案

解决方案1
-1 2020-01-12 13:06:12

这是表单的代码，涉及输入验证。 如何让JS代码正常运行？

问题描述

1 个解决方案

解决方案1 -1 2020-01-12 13:06:12

这是表单的代码，涉及输入验证。如何让JS代码正常运行？

解决方案1
-1 2020-01-12 13:06:12