使用Abide進行表單驗證

Question

我正在使用基礎css進行前端設計，如何使用Abide（表單驗證程序）。

例子：..如果我需要讓10只爲外地的電話號碼字符..

糾正我，如果我錯了，因爲我用粉底和web開發一個新手。

我已經嘗試過這樣做......這不工作..

version : '5.3.3', 

settings : { 
    live_validate : true, 
    focus_on_invalid : true, 
    error_labels: true, // labels with a for="inputId" will recieve an `error` class 
    timeout : 1000, 
    patterns : { 
    alpha: /^[a-zA-Z]+$/, 
    alpha_numeric : /^[a-zA-Z0-9]+$/, 
    integer: /^[-+]?\d+$/, 

    // modified here 

    cvv : /^([0-9]){3,4}$/, \\ I have just copied the above line and renamed the pattern as "cv" 
    cv : /^([0-9]){3,4}$/' \\the pattern cvv works but the same when I copy pasted and renamed to cv does not work. 

    ` 

Answer 1

我會通過看他們的文檔（這裏：http://foundation.zurb.com/docs/components/abide.html）開始

在那裏你會學習如何添加自定義模式（因爲您有一些自定義需求）。

你必須定義一個新的模式，也許叫它phoneNumber的

$(document) 
    .foundation({ 
    abide : { 
     patterns: { 
     phoneNumber: ^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})$ //this matches (111) 222-3333 | 1112223333 | 111-222-3333 
     } 
    } 
    }); 

一旦你已經確定你的模式，你可以繼續使用它：

<form class="custom" data-abide> 
    <label>Phone Number 
    <input type="text" pattern="phoneNumber" required> 
    </label> 
</form> 

這裏是另一個鏈接有用的網站，當需要RegExp：http://regexlib.com/Search.aspx?k=phone+number&c=-1&m=-1&ps=20 - 如果你想匹配一個不同的格式看看那裏。