Question

请看一下这段代码，我想知道如何使用JavaScript验证这个单一形式的所有这些输入元素。

我知道他们看起来一样，但我在一个单独的div中有名字。我非常感谢您对我的表格的更正和贡献。

<form name="myForm">
    <input type="text" name="fname"><br><br>
    <input type="text" name="fname"><br><br>
    <input type="text" name="fname"><br><br>
    <input type="text" name="fname"><br><br>
    <input type="text" name="fname"><br><br>
    <input type="password" name="fname"><br><br>
    <input type="submit" value="Submit">
</form>

Answer 1

是的，你可以。试试这个来验证Java Script中的数据

 <form name="myForm" onsubmit="return validateData()">
    <input type="text" id="name" name="fname"><br><br> 
    <input type="text" id="username" name="username"><br><br>
    <input type="text" id="email" name="email"><br><br>
    <input type="password" id="password" name="password"><br><br>                   
    <input type="submit" value="Submit">
  </form>

然后你必须创建一个javaScript函数来验证数据，如上面的validateDate（），为此，现在你的代码是

  <script>
    function validateData() {
    var fname = document.getElementById("fname").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    //if name is empty
    if(fname == "" || username == "" || email == "" || password == "") {
    //SOme Error Code here
    alert("Please Fill All the Form Data.");
      }
     if(username.length < 4 || username.length > 20) {
    //SOme Error Code here
    alert("username must be less than 20 but more than 4 Characters.");
      }

     // You can add more filters like  password length, and so on by using more if conditions
    }
    </script>
    <body>
    <form name="myForm" onsubmit="return validateData()">
      <input type="text" id="name" name="fname"><br><br>   
      <input type="text" id="username" name="username"><br><br>
      <input type="text" id="email" name="email"><br><br>
      <input type="password" id="password" name="password"><br><br>                    
      <input type="submit" value="Submit">
    </form>
    </body>

这就是全部。：）

Answer 2

即使这需要jQuery，它也可以解决您的问题：

要使用jQuery Validate，您只需要在代码中包含一个等于或大于1.7的jQuery库版本以及一个带有该插件的文件。

查看示例：

jQuery('form').validate();

根据W3C，在调用jQuery.fn.validate方法之后，您可以使用对HTML5有效的数据属性来验证字段。

查看必填字段的示例：

<form>
<input type="text" data-required />
</form>

https://plugins.jquery.com/validate/

如何验证表单中的多个输入

2 个答案: