HTML5 中的 Javascript 表单验证

Question

设计这些表单，并进行验证以防止表单数据提交为空，并且某些字段仅接受数字或字母。

问题是，当我在每个输入上通过 id 调用它时，这是有效的，但由于我不能在页面上使用相同的 id 名称，这将导致 w3 验证错误。是否有另一种方法可以做到这一点，使其在没有任何验证错误的情况下工作。

HTML

<form name="insertrecord" action="indexregister.php" method="post">
      UAD Username: <br/><input type="text" id="numbers" name="uadnumber" /><br/>
      First name: <br/><input type="text" id="lettersnumbers" name="firstname" /><br/>
      Surname: <br/><input type="text" id="lettersnumbers" name="surname" /><br/>
      Mobile Phone: <br/><input type="text" id="numbers" name="mphone" /><br/>
      Username: <br/><input type="text" id="lettersnumbers" name="username" /><br/>
      Password: <br/><input type="password" id="lettersnumbers" name="password" /><br/>
      *Confirm Password: <br/><input type="password" id="lettersnumbers" name="password" /><br/>
      <input type="submit" onclick="Numeric(), AlphaandNumeric()" value="Submit" />
    </form>
    <hr>
    <h2>Delete a Record from Database</h2>
    <h1>Delete Record from Database</h1>
    <p>*UAD Username record must already exist, for this to work</p>
    <p>All information linked to this UAD username, will be deleted</p>
    <form name="deleterecord" action="indexdelete.php" method="post">
      UAD Username: <br/><input type="text" id="numbers" name="uadnumber" /><br/>
      <input type="submit" onclick="Numeric()" value="Delete" />
    </form>
    <hr>
    <h2>Update a Record from Database</h2>
    <h1>Update Record from Database</h1>
    <p>*UAD Username record must already exist, for this to work</p>
    <form name="updaterecord" action="indexupdate.php" method="post">
      UAD Username: <br/><input type="text" id="numbers" name="uadnumber" /><br/><p>Type the new phone number you wish to update, linked to the selected UAD username</p>
      Mobile Phone: <br/><input type="text" id="numbers" name="mphone" /><br/>
      <input type="submit" onclick="Numeric()" value="Update" />
    </form>

JavaScript

function Numeric(){
  var numexp = /^[0-9]+$/;
  if(document.getElementById('numbers').value.match(numexp)){
    return true;
  }else{
    alert("Fields within this form must only use numbers, and not left empty");
    return false;
  }
}

function Alpha(){
  var alphaexp = /^[a-zA-Z]+$/;
  if(document.getElementById('letters').value.match(alphaexp)){
    return true;
  }else{
    alert("Fields within this form must only use letters, and not left empty");
    return false;
  }
}

function AlphaandNumeric(){
  var alphanumexp = /^[a-zA-Z0-9]+$/;
  if(document.getElementById('lettersnumbers').value.match(alphanumexp)){
    return true;
  }else{
    alert("Fields within this form must only use letters and numbers, and not left empty");
    return false;
  }
}

Answer 1

将 id 移至类(class)。然后使用 getElementsByClassName 并遍历每个元素。

所以，

<input type="text" id="numbers" name="uadnumber" />

变成了

<input type="text" class="numbers" id="numbers1" name="uadnumber" />

和

if(document.getElementById('numbers').value.match(numexp)){
return true;
}

变成了

var nbrs = document.getElementsByClassName('numbers');
for (var i = 0; i < nbrs.length; i++)
{
if(!nbrs[i].value.match(numexp)){
alert("Fields within this form must only use numbers, and not left empty");
return false;
}
}
return true;