Question

我想验证表单中的多个字段。为此，我不想为所有字段写单独的条件。所以我已经分配了错误消息，如键和值对。如果我在没有输入任何值的情况下离开所有字段，那么它应填充错误消息。

这是我的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];
        }
        }

 }

这会在document.querySelector("."+id).innerHTML=error[id];行显示有关null内容的错误。

Answer 1

.适用于课程。如果要检测ID，则需要使用#。此外，您需要使用value，而不是innerHTML。所以，正确的

document.querySelector("."+id).innerHTML=error[id];

到

document.querySelector("#"+id).value=error[id];

Answer 2

document.querySelector（＆＃34;＆＃34 + ID）.innerHTML =错误[ID];

希望您的元素具有与input id对应的类（例如，class="id2"等）。您还没有在问题中显示任何内容。 querySelector如果无法找到匹配的元素，则会返回null。

如果您在适当的位置添加一系列此类内容：

<span class="id1"></span>

...然后该元素将收到<input id="id1">的错误消息。或者当然，由于这些元素是唯一的，您可以使用id，例如error_id1，error_id2等。

以下是使用类的完整示例：Live Copy

<!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>

在上面的内容中，当字段有值时，我还清除错误，这样第二次运行时，错误就会消失。（我还将提交按钮更改为一个按钮，但这只是因为表单在示例中没有被提交。）

附注：我将validate移至表单上的onsubmit，如果有任何错误，请将其返回false。

Javascript验证多个字段

2 个答案: