0

我正在使用基础 css 进行前端设计以及如何使用 Abide（表单验证器）。

示例：.. 如果我只需要在字段电话号码中允许 10 个字符..

纠正我如果我错了，因为我是使用基础和网络开发的新手。

我已经尝试过这样做......这不起作用.. 

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.

    `
4

1 回答 1

2

我将首先查看他们的文档（此处： 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 - 如果您想匹配不同的格式，请使用看这里。

于 2014-10-01T14:04:02.820 回答