验证多个字段的Javascript_Javascript_Html

验证多个字段的Javascript

javascript html

验证多个字段的Javascript,javascript,html,Javascript,Html,我想验证表单中的多个字段。为此，我不想为所有字段编写单独的条件。因此，我将错误消息分配为键和值对。如果我没有键入任何值而保留所有字段，那么它将填充错误消息这是我的html代码 <head> <title></title> <script src="Scripts/validate_register.js"></script> </head> <body> <table class="valid">

我想验证表单中的多个字段。为此，我不想为所有字段编写单独的条件。因此，我将错误消息分配为键和值对。如果我没有键入任何值而保留所有字段，那么它将填充错误消息

这是我的html代码

<head>
<title></title>
<script src="Scripts/validate_register.js"></script>
</head>
<body>
<table class="valid">
        <tr>
            <td>id:</td>
            <td><input type="text" id="id1" placeHolder="Enter your name"/></td></tr>
            <tr><td>email:</td>
            <td><input type="text" id="id2" placeHolder="Enter your email"/></td></tr>
            <tr><td>password:</td>
            <td><input type="text" id="id3" placeHolder="Enter your password"/></td></tr>
            <tr><td>address:</td>
            <td><input type="text" id="id4" placeHolder="Enter your address"/></td></tr>
            <tr><td>contact no:</td>
            <td><input type="text" id="id5" placeHolder="Enter your contact no"/></td>
        </tr>
                    <tr><td><input type="submit" onclick="validate()" value="submit"> </td></tr></table>  
  </body>


身份证件：
电邮：
密码：
地址:
联络电话:

这是我的javascript代码

function validate () {
        var error={
                    id1:'name Cannot be empty',
                    id2:'email cannot be empty',
                    id3:'password cannot be empty',
                    id4:'address Cannot be empty',
                    id5:'contactno cannot be empty'

        }
        var elements=document.querySelectorAll('input');
        for(var i=0;i<elements.length;i++){

        if(elements[i]['value']=="")
        {
                    var id=elements[i]['id'];
                    document.querySelector("."+id).innerHTML=error[id];
        }
        }

 }

函数验证（）{
var误差={
id1:“名称不能为空”，
id2:“电子邮件不能为空”，
id3:“密码不能为空”，
id4:“地址不能为空”，
id5:“contactno不能为空”
}
var elements=document.querySelectorAll（'input'）；
for（var i=0；i
用于类。如果要检测ID，需要使用#
。此外，需要使用值，而不是innerHTML
。因此，请更正
document.querySelector("."+id).innerHTML=error[id];

到
document.querySelector（“.”+id）.innerHTML=错误[id]
它期望您拥有一个元素，该元素的类对应于输入的id
（例如
class=“id2”
等）。您没有显示问题中的任何内容。querySelector
如果找不到匹配元素，则返回null

如果在适当的位置添加一系列类似的内容：
<span class="id1"></span>

在上面，我还清除了字段有值时的错误，以便在第二次运行时，错误消失。（我还将submit按钮更改为一个按钮，但这只是为了在示例中表单不会在任何地方提交。）

旁注：我会将validate
移动到表单上的onsubmit
，如果有任何错误，我会让它返回false
。
document.querySelector（“.”+id）。innerHTML=error[id]；这一行显示错误。innerHTML为空谢谢。工作正常。有没有其他方法可以最小化我的代码？除了为5个字段提供5个span类，我如何才能提供一个公共类，并且我还需要在我的脚本中访问它。@user3764346:您有很多选项。例如，不要将span
标记在标记中向上，如果有错误，可以添加它们（使用insertAdjacentHTML
或createElement
与insertBefore
组合使用），如果没有错误，可以删除它们（如果存在）。我的建议只有在每个字段的错误可能不同的情况下才有意义（例如，如果您检查电子邮件
字段中是否有@，并检查该字段是否为空）；如果不能，您可以将包含标记中错误的范围最初隐藏，然后在“验证”中显示/隐藏它们。有很多选择。
<span class="id1"></span>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <table class="valid">
      <tr>
        <td>id:</td>
        <td><input type="text" id="id1" placeHolder="Enter your name"/><span class="id1"></span></td></tr>
      <tr><td>email:</td>
        <td><input type="text" id="id2" placeHolder="Enter your email"/><span class="id2"></span></td></tr>
      <tr><td>password:</td>
        <td><input type="text" id="id3" placeHolder="Enter your password"/><span class="id3"></span></td></tr>
      <tr><td>address:</td>
        <td><input type="text" id="id4" placeHolder="Enter your address"/><span class="id4"></span></td></tr>
      <tr><td>contact no:</td>
        <td><input type="text" id="id5" placeHolder="Enter your contact no"/><span class="id5"></span></td>
      </tr>
      <tr><td><input type="button" onclick="validate()" value="submit"> </td></tr></table>  
  </body>
  <script>
    "use strict";

    function validate () {
      var error={
        id1:'name Cannot be empty',
        id2:'email cannot be empty',
        id3:'password cannot be empty',
        id4:'address Cannot be empty',
        id5:'contactno cannot be empty'

      }
      var elements=document.querySelectorAll('input');
      for(var i=0;i<elements.length;i++){

        var id=elements[i]['id'];
        document.querySelector("."+id).innerHTML=elements[i].value ? "" : error[id];
      }

    }
  </script>
</body>
</html>