如何驗證表單中的多個輸入

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