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

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脚本中的数据

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

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

  <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 个解决方案

解决方案1
-1 2016-09-12 00:12:14

解决方案2
-2 2016-09-12 00:40:06

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

问题描述

2 个解决方案

解决方案1 -1 2016-09-12 00:12:14

解决方案2 -2 2016-09-12 00:40:06

解决方案1
-1 2016-09-12 00:12:14

解决方案2
-2 2016-09-12 00:40:06