jQuery驗證正規化上<code>array of input</code></p> <p>問題的投入

Question

我有在jquery validation Normalizer問題的陣列驗證無法正常工作，應該驗證以下模式

i.e. (example.com) or (http://example.com) or (http://www.example.com)

這裏的代碼

Html

<form name="xyz"> 
... 
    <input type="url" name="url[]"> 
    <input type="url" name="url[]"> 
    <input type="url" name="url[]"> 
    <input type="url" name="url[]"> 
... 
</form> 

的Javascript

$('form').validate({ 
    rules: { 
     'url[]': { 
      url: true, 
      normalizer: function(el) { 
       var url = el.value; 

       // Check if it doesn't start with http:// or https:// or ftp:// 
       if (url && url.substr(0, 7) !== "http://" 
         && url.substr(0, 8) !== "https://") { 
       // then prefix with http:// 
       url = "http://" + url; 
       } 

       // Return the new url 
       return url; 
      } 
     } 
    } 
}); 

Answer 1

看一看這個document。

validate函數將input元素的值設置爲參數，因此您不必在funcion主體中訪問它。

var url = el.value; 

成爲

var url = el; 

---

[更新]

我試圖運行提供的代碼段的問題，它表現得像它只是驗證一個字段， 而忽略其他領域。

$('form').validate({ 
 
    rules: { 
 
     'url[]': { 
 
      url: true, 
 
      normalizer: function(el) { 
 
       var url = el; 
 

 
       // Check if it doesn't start with http:// or https:// or ftp:// 
 
       if (url && url.substr(0, 7) !== "http://" 
 
         && url.substr(0, 8) !== "https://") { 
 
       // then prefix with http:// 
 
       url = "http://" + url; 
 
       } 
 

 
       // Return the new url 
 
       return url; 
 
      } 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script> 
 
<form name="xyz"> 
 
    <input type="url" name="url[]"> 
 
    <input type="url" name="url[]"> 
 
    <input type="url" name="url[]"> 
 
    <input type="url" name="url[]"> 
 
</form>

這issue說

name屬性爲對於每個字段或字段的基團（無線電/複選框）是唯一的。

然後我看到這個post，人們提供了兩種方法來解決這個問題：

1. 修改jquery.validate.js的源代碼
2. 使用忽視：[]

所以我嘗試了第二個，它確認所有輸入，但問題是在第一次編輯輸入後會出現警告消息。

除了修改jquery.validate.js，也許你可以 更改url []到url [1]，url [2]，url [3]的名稱...，並添加rules到每個URL輸入級的，就像這樣：

$('form').validate(); 
 
    
 
$(".url-input").each(function(){ 
 
    $(this).rules("add",{ 
 
      url: true, 
 
      normalizer: function(el) { 
 
       var url = el; 
 

 
       // Check if it doesn't start with http:// or https:// or ftp:// 
 
       if (url && url.substr(0, 7) !== "http://" 
 
         && url.substr(0, 8) !== "https://") { 
 
       // then prefix with http:// 
 
       url = "http://" + url; 
 
       } 
 

 
       // Return the new url 
 
       return url; 
 
      } 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script> 
 
<form name="xyz"> 
 
    <input type="url" name="url[0]" class="url-input" > 
 
    <input type="url" name="url[1]" class="url-input"> 
 
    <input type="url" name="url[2]" class="url-input"> 
 
    <input type="url" name="url[3]" class="url-input"> 
 
</form>