Проверка формы с использованием Abide

Question

Я использую базовый CSS для внешнего интерфейса и как я могу использовать Abide(валидатор форм).

Пример:.. Если мне нужно разрешить только 10 символов для поля Номер телефона..

Поправьте меня, если я не прав, поскольку я новичок в использовании Foundation и Web Dev.

Я уже пытался сделать это... это не работает..

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 [phone] | 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 - если вы хотите использовать другой формат, сделайте посмотрите там.