HTML5中的Javascript表单验证

设计这些表单，通过验证防止表单数据被提交为空，并且某些字段只接受数字或字母

问题是，当我在每个输入上按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>

---

将ID移动到类中。然后使用getElementsByClassName并遍历每个元素

所以

变成

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

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;

var nbrs=document.getElementsByClassName（'numbers'）；
对于（变量i=0；i

将ID移动到类中。然后使用getElementsByClassName并遍历每个元素

所以

变成

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

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;

var nbrs=document.getElementsByClassName（'numbers'）；
对于（变量i=0；i

要求

id

属性是唯一的，否则您的标记就是无效的，

文档。getElementById

将只返回其中一个元素。对于将在页面的多个部分中显示的内容，最好使用类。然后可以使用

document.getElementsByClassName（）

并迭代返回的

NodeList

对象中的元素。（请注意，它不是数组，而是类似数组的对象。）

另一个需要考虑的是使用自动处理数字之类的东西。您还可以挂接到

验证
事件中，自己也可以进行额外的验证

最后要记住的是，客户端验证不能是您唯一的验证方法，因为人们可以在尝试提交表单之前关闭或编辑您的Javascript。请确保您也在执行一些服务器端验证。
要求
id
属性是唯一的，或者您的标记是无效的，并且
文档。getElementById
将只返回其中一个元素。对于将在页面的多个部分中显示的内容，最好使用类。然后可以使用
document.getElementsByClassName（）
并迭代返回的
NodeList
对象中的元素。（请注意，它不是数组，而是类似数组的对象。）

另一个需要考虑的是使用自动处理数字之类的东西。您还可以挂接到
验证
事件中，自己也可以进行额外的验证

最后要记住的是，客户端验证不能是您唯一的验证方法，因为人们可以在尝试提交表单之前关闭或编辑您的Javascript。请确保您也在进行一些服务器端验证。
我喜欢并对前面的两个答案进行了投票，但我将推荐另外一种类似于类名的方法。由于类名与样式相关，因此最好使用专用于验证的自定义属性，以便在语义上更准确

例如，可以使用一个自定义属性，该属性可以命名为
数据验证
，并保存与验证相关的值，并使逻辑相应地起作用

这是一个基于您的代码和这个概念的示例，它具有一种通用的验证方式，遵循类似于
策略模式的方式


js

function validate(){
  var elements = document.querySelectorAll("[data-validation]");
  for(var i=0;i<elements.length;i++){
    var validationType = elements[i].getAttribute("data-validation");
    if(validationType.indexOf("numbers")!=-1){
      validateNumeric(elements[i]);
    }
    if(validationType.indexOf("letters")!=-1){
      validateAlpha(elements[i]);
    }
    if(validationType.indexOf("lettersnumbers")!=-1){
      validateAlphaandNumeric(elements[i]);
    }
  }

}

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

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

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

函数验证（）{
var elements=document.queryselectoral（“[数据验证]”）；
对于（var i=0；i我喜欢并对前面的两个答案都投了赞成票，但我将建议另外一种类似于类名的方法。由于类名与样式相关，因此最好使用专用于验证的自定义属性，以便在语义上更准确

例如，可以使用一个自定义属性，该属性可以命名为
数据验证
，并保存与验证相关的值，并使逻辑相应地起作用

这是一个基于您的代码和这个概念的示例，它具有一种通用的验证方式，遵循类似于
策略模式的方式


js

function validate(){
  var elements = document.querySelectorAll("[data-validation]");
  for(var i=0;i<elements.length;i++){
    var validationType = elements[i].getAttribute("data-validation");
    if(validationType.indexOf("numbers")!=-1){
      validateNumeric(elements[i]);
    }
    if(validationType.indexOf("letters")!=-1){
      validateAlpha(elements[i]);
    }
    if(validationType.indexOf("lettersnumbers")!=-1){
      validateAlphaandNumeric(elements[i]);
    }
  }

}

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

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

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

函数验证（）{
var elements=document.queryselectoral（“[数据验证]”）；
对于（var i=0；IID应始终唯一。您应使用ClasseSID应始终唯一。您应使用classesI尝试了您的方法，但该方法无效/EXAMPLE/From document.getElementById（'numbers'）=document.getElementsByClassName（'numbers'））和密码：
 =密码：
你能发布修改的标记吗？简单地更改为GETelEntsByCype名称将不会有帮助，除非你实际上有附加到元素的类名…你也可以考虑HTML5模式属性：只需将模式属性设置到正则表达式来验证你的字段，让HTML5为你处理它。尝试了您的方法，但该方法无效/EXAMPLE/From document.getElementById（'numbers'）=document.getElementsByClassName（'numbers'））和密码：
 =密码：
你能发布修改的标记吗？简单地更改为GETelEntsByCype名称将不会有帮助，除非你实际上有附加到元素的类名…你也可以考虑HTML5模式属性：只需将模式属性设置到正则表达式来验证你的字段，让HTML5为你处理它。uick提问，您的代码可以工作，但显示后的警报允许代码运行，即使验证已到位，我是否将其放置错误。/EXMAPLE/function deleteNumeric（）{var numexp=/^[0-9]+$/；var dnbrs=document.getElementsByClassName（'delenumbers'）；for（var o=0；o<form name="updaterecord" action="" method="post">
      UAD Username: <br/><input type="text" data-validation="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" data-validation="numbers" name="mphone" /><br/>
    First name: <br/><input type="text" data-validation="lettersnumbers" name="firstname" /><br/>
      Surname: <br/><input type="text" data-validation="lettersnumbers" name="surname" /><br/>
      <input type="submit" onclick="validate()" value="Update" />
    </form>