Question

我试图在提交时验证以下html表单的id字段。出于某种原因，它没有调用JavaScript验证并按原样提交表单。我是JavaScript的新手，所以很难弄清楚我犯的是什么错误。任何帮助将不胜感激。

<!doctype html>
<html>
<head>
<script type="text/javascript" src ="/javascripts/idcheck.js" >  </script>

</head>
<body>

<div class=page>
  <div class=metanav>
  <a href="<% menu_url %>">Menu</a>
  <% IF not session.logged_in %>
     <a href="<% login_url %>">login</a>                          
  <% ELSE %>
     <a href="<% logout_url %>">log out</a>
  <% END %>

 <% IF session.logged_in %>
    <form id ="frm1" method ="POST" onsubmit ="return idCheck(this)" action="<% identry_url %>">
 <% ELSE %>
     <a href="<% login_url %>">login</a>                                                        <% END %> 
</div

<% IF msg %>
    <div class=flash> <% msg %> </div>
 <% END %>

  <% IF flash.error %>
      <div class=error> <% flash.error %> </div>
  <% END %>
 <% content %>
</div>


<p>&nbsp;<b>RackID</b> <input type="text" id="rack" size =8>&nbsp; <b>Tech Initial</b>&nbsp;
<input type="text" id="tech" size=3> &nbsp; </p>

<p>&nbsp;<b>V&nbsp; </b> <input type="text" id="id1"  size =8>&nbsp;
<input type="text" id="id2" size =8>&nbsp;
<input type ="text" id="id3" size =8>&nbsp;
<input type="text" id="id4" size =8>&nbsp;</p>


<p>&nbsp;<b>W</b> 
<input type="text" id="id5" size =8>&nbsp;
<input type="text" id="id6" size =8>&nbsp;
<input type="text" id="id7" size =8>&nbsp;
<input type="text" id="id8" size =8>&nbsp;
</p>

<p>&nbsp;<b>X&nbsp;</b>
<input type="text" id="id9" size =8>&nbsp;
<input type="text" id="id10" size =8>&nbsp;  
<input type="text" id="id11" size =8>&nbsp;
<input type="text" id="id12" size =8>&nbsp;
</p>

<p>&nbsp;<b>Y&nbsp;</b>
<input type="text" id="id13" size =8>&nbsp;
<input type="text" id="id14" size =8>&nbsp;
<input type="text" id="id15" size =8>&nbsp;
<input type="text" id="id16" size =8>&nbsp;
</p>

<p>&nbsp;<b>Z&nbsp;</b>
<input type="text" id="id17" size =8>&nbsp;
<input type="text" id="id18" size =8>&nbsp;
<input type="text" id="id19" size =8>&nbsp;
<input type="text" id="id20" size =8>&nbsp;
</p>



<input type="Submit" value="CheckID" name ="submit">
&nbsp;

</form>

</body>
</html>

这是我验证的javascript函数

function idCheck() {
    "use strict";

var chkstring, prime, flds, i, id, idlen, stub, rem;
chkstring = "ABCDEFGHJKLMNPQRSTVWXYZ";
prime = chkstring.length;

 var flds =document.getElementById("frm1").querySelectorAll('input[type="text"]').;

 //Start Validation Loop
for (i = 2; i < flds.length; i++) {
    id = "";
    //get the value of the field
    id = flds[i].value;
    idlen = id.length;

    if (idlen !== 8) {
        //flds[i].style.backgroundColor = 'red';
        alert("flds[i].value is not 8 charecters long");
        return false;

    }
    stub = id.substr(0, 7);
    if (stub === 0) {
        flds[i].style.backgroundColor = 'red';
        return false;

    }
    stub = stub - 1;
    rem = stub % prime;
    if (chkstring.substr(rem, 1) !== id.substr(7, 1)) {
        flds[[i].style.backgroundColor = 'red';
        return false;

    }
    return true;
}
}

Answer 1

当表单有效时，您应该return true，因为onSubmit希望这样做。

Answer 2

验证功能的这一部分会立即跳出错误：

var flds =document.getElementById("frm1");

 //Start Validation Loop
for (i = 2; i < flds.length; i++) {

您正在选择表单元素，然后期望它具有大于2的length属性。i < flds.length循环中的for条件需要更改为其他内容。

如果你想迭代每个输入，你可能想要这样的东西：

var flds = document.getElementById('frm1').querySelectorAll('input[type="text"]');

for(i = 2; i < flds.length; i++) {
    id = flds[i].value;
    ...

Element.querySelectorAll的MDN条目包含有关浏览器兼容性的说明，以及有关其功能的更多信息。

表格未经提交确认

2 个答案: