Слияние кода завершено, страница обновится автоматически
Данный текст переведён на русский язык.
Кроме того, вы также можете использовать регулярное выражение с помощью rawTest для быстрой проверки.
validator
.add('username', [
// ...
['rawTest' , /^[0-9a-zA-z_]+$/, 'может содержать только цифры, буквы и подчёркивание']
])
Стратегия проверки похожа на библиотеку регулярных выражений. validator также имеет встроенные некоторые часто используемые стратегии проверки:
Обычная стратегия проверки — это оболочка синхронного метода проверки, доступ к которой можно получить через атрибут __strategy. Вы можете добавить её с помощью метода экземпляра .strategy().
Теперь давайте рассмотрим простой пример, чтобы добавить стратегию проверки числового диапазона в наше поле number:
validator
// Сначала добавляем стратегию проверки числового диапазона
.strategy('range', function(field, err, start, end) {
// Получаем значение элемента поля, то есть значение, которое пользователь вводит в поле формы
var value = field.value
if (value < start || value > end) {
// Возвращаемое значение функции будет отображаться как содержимое элемента сообщения на странице. Обычно нам нужно только вернуть err при неудачной проверке. err — это сообщение об ошибке, настроенное нами при регистрации стратегии проверки. Помните, что должно быть сообщение об обязательной ошибке?
return err
}
})
Каждая стратегия проверки (включая асинхронную стратегию проверки) принимает объект поля field в качестве первого параметра:
err используется в качестве второго параметра. Обычно мы должны возвращать его, когда стратегия проверки не проходит.Далее мы указываем два настраиваемых параметра start, end.
Давайте посмотрим, как это работает:
// Регистрируем стратегию range для поля number
.add('number', [
['range', 10, 100, 'значение должно находиться в диапазоне от 10 до 100']
])
Каждый элемент нашей стратегии проверки представляет собой массив, элементы которого представляют собой:
range;10, 100;'значение должно находиться в диапазоне от 10 до 100' (обратите внимание, что сообщение об ошибке обязательно).Разве это не просто?
Конечно, strategy также поддерживает пакетную регистрацию.
validator
.strategy({
'a': fn,
'b': fn,
// ....
})
Асинхронная стратегия проверки — это упаковка асинхронной проверки на основе Promise, которую можно получить с помощью атрибута __async, и добавить с помощью метода экземпляра async().
Сейчас мы используем setTimeout для имитации простого примера асинхронного получения имени пользователя:
validator
// msg — успешное сообщение при успешном выполнении асинхронной операции;
// err — сообщение об ошибке при неудачном выполнении асинхронной операции;
// is — настраиваемый параметр
.async('ajaxUsername', function (field, msg, err, is) {
// Необходимо вернуть экземпляр Promise
return new Promise(function (resolve, reject) {
field.infoMsg = 'Выполняется запрос...'
setTimeout(function () {
if (field.value === is) {
// Асинхронный запрос выполнен успешно! Вернём успешное сообщение.
resolve(msg)
} else {
// Асинхронный запрос не выполнен! Вернём сообщение об ошибке.
reject(err)
}
}, 2000)
})
})
.add('username', [
['notEmpty', 'не может быть пустым'],
['minLength', 3, 'длина должна быть не менее 3 символов'],
['maxLength', 10, 'длина не должна превышать 10 символов'],
// Регистрация асинхронной стратегии проверки
// В отличие от синхронной, успешное и ошибочное сообщения должны существовать
// Это всё ещё предложение, даже если это пустая строка
['ajaxUsername', 'sunny' 'имя пользователя доступно', 'имя пользователя недоступно']
])
После регистрации асинхронной стратегии проверки в поле username метод экземпляра result изменится. Он вернёт экземпляр Promise, а не логическое значение (когда в поле есть только обычная стратегия проверки, оно возвращает логическое значение, указывающее, прошло ли поле проверку).
f.username.oninput = function (e) {
// Возвращается экземпляр Promise
validator.result('username')
.then(function() {
console.log(e.target.value)
}, function () {
console.log('Ошибка!!')
})
}
// Если вас интересует только состояние успеха асинхронных операций, вы можете упростить код выше с помощью быстрых методов событий.
// Они автоматически переключают обработку result для синхронизации и асинхронности
validator
.oninput(function (e) {
console.log(e.target.value)
})
Наконец, давайте углубимся в принцип работы стратегии проверки:
Когда поле username выполняет проверку по всем стратегиям, оно сначала выполнит все обычные стратегии проверки сверху вниз. Как только одна из обычных стратегий проверки завершится неудачно, она прекратит обход. Только после успешной проверки всех обычных стратегий проверки она выполнит асинхронные стратегии проверки с помощью метода Promise.all(), что означает, что если одна из асинхронных стратегий проверки не пройдёт, все проверки завершатся неудачно.
Обратите внимание: если метод result() не указывает имя поля, он будет рассматривать всю форму как единое целое.
В его мире вы можете наблюдать за его жизненным циклом с помощью метода экземпляра hook().
validator
.hook('fieldSucceed', function (field) {
console.log(field.name + 'прошло')
})
.hook('fieldFailed', function (field) {
console.log(field.name + 'не удалось')
})
// Или передайте объект
validator
.hook({
fieldSucceed: fn,
fieldFailed: fn,
succeed: fn
// ...
})
Обратите внимание: повторяющиеся объявления хуков будут перекрывать существующие хуки.
Мы уже познакомились с объектом поля в разделе «Расширение асинхронной стратегии проверки». Он имеет следующие атрибуты:
Обратите внимание: value и infoMsg будут реагировать на ваши изменения в реальном времени. Остальные атрибуты вступят в силу при запуске проверки.
Есть два способа изменить объект поля:
strategy, async и некоторые крючки жизненного цикла передают текущий объект поля в качестве параметра, который вы можете напрямую изменять.По умолчанию внутренние исключения выбрасываются напрямую. Вы можете указать config.debug экземпляра как false, чтобы предотвратить выброс внутренних исключений.
Обычно мы делаем это только при выпуске продукта.
Лучший способ — указать крючок error.
validator.hook('error', function (err) {
if (err) {
// ...
}
})
Он будет перехватывать все внутренние исключения.
Примечание: крючок error должен быть указан перед всеми остальными, так как некоторые внутренние исключения могут возникнуть во время инициализации.
Большинство методов, встроенных в Validator, поддерживают цепные вызовы, поэтому вы можете организовать структуру своего кода следующим образом:
var validator = new Validator()
validator
.hook() // крючки жизненного цикла
.pattern() // добавление регулярного выражения
.strategy() // добавление обычной стратегии проверки
.async() // добавление асинхронной стратегии проверки
.add() // регистрация поля
// ...
.oninput // быстрый метод события
// ...
Когда у вас слишком много управляемых форм, размещение всех регулярных выражений и стратегий проверки на экземпляре не всегда является лучшим решением, и это также может вызвать проблемы с именованием из-за совместного использования прототипов.
Раз мы используем прототип, почему бы не использовать его преимущества?
В одном модуле сосредоточьте управление нашими регулярными выражениями и стратегиями проверки:
// pattern.js
new patternExtend = Validator()
patternExtend
.pattern()
// ...
// strategy.js
new strategyExtend = Validator()
strategyExtend
.strategy()
.async()
// ...
Теперь вы можете использовать их в любом экземпляре.
Если экземпляр имеет уникальную регистрацию, вы можете управлять ими с помощью пространства имён:
v1
pattern('v1-username')
v2
pattern('v2-username)
new Validator(form [Element], options O/F)
config.error.className=' ': класс элемента ошибки.config.error.type='span': тип элемента ошибки.config.error.text=' ': текст по умолчанию для элемента ошибки.config.debug=true: включить ли отладку.add(name S, validator A): добавить стратегию проверки к полю.pattern(name S, pattern [regexg], force=false? B): добавить одно регулярное выражение.pattern(obj {name: regexg}, force=false? B): добавить несколько регулярных выражений.strategy(name S, pattern [regexg], force=false? B): добавить обычную стратегию проверки.strategy(obj {name: regexg}, force=false? B): добавить несколько обычных стратегий проверки.async(name S, pattern [regexg], force=false? B): добавить асинхронную стратегию проверки.async(obj {name: regexg}, force=false? B): добавить несколько асинхронных стратегий проверки.hook(name S, pattern [regexg]): добавить крючок жизненного цикла.hook(obj {name: regexg}): добавить несколько крючков жизненного цикла.result(name=undefined? S): запустить и получить результат проверки.getData(ignoreName1=undefined? S, ...): получить данные поля формы.set(name S, key S, value [any]): установить значение атрибута указанного объекта поля имени.setInfo(name S, value [any]): быстрый способ установить содержимое infoMsg.setValue(name S, value [any]): быстрый способ установки значения поля value.setPass(name S, value [any]): быстрый способ установки того, прошла ли проверка поля pass.Поля, которые прослушивают быстрые события, не могут регистрировать какие-либо асинхронные стратегии проверки.
oninput(fn F): привязать событие input ко всем зарегистрированным полям.onsubmit(fn F): связать событие submit с формой.Стратегические методы нельзя использовать напрямую, но они указываются в виде строк при регистрации стратегии проверки. Параметры пользовательской проверки должны следовать сразу за ними, а настраиваемое сообщение об ошибке должно быть последним элементом и обязательно присутствовать.
Внимание: асинхронная стратегия проверки должна иметь два сообщения — успешное и неудачное.
validator
.add('username', [
// minLength 需要使用的策略方法
// 3 自定义参数
['minLength', 3, '至少3个字符']
])
notEmpty(): поле не может быть пустым (обязательно).minLength(length): минимальная длина поля.maxLength(length): максимальная длина поля.min(length): минимальное значение.max(length): максимальное значение.equal(name): соответствует ли оно значению другого поля.test(insideRegexpName, ...): проверка регулярного выражения. Этот метод принимает только встроенные или расширенные регулярные выражения.rawTest(regexp): проверка регулярного выражения, принимает регулярное выражение.disabled(): запретить проверку поля.Отсутствуют.
email: адрес электронной почты.phone: номер мобильного телефона в Китае.id: 18-значный номер удостоверения личности.qq: номер QQ.weChat: номер WeChat.zipCode: почтовый индекс.Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )