使用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 - 如果你想匹配一个不同的格式看看那里。