we validator
v2.1.17
Существуют различия между версиями 2.x и 1.x. Если вы продолжаете использовать старую версию, вы можете проверить версию 1.x. Если вы хотите выполнить обновление до версии 2.x, сначала прочтите руководство по обновлению. Рекомендуется использовать версию 2.x.
Простой и гибкий плагин проверки форм, поддерживающий мини-программы, браузеры и Nodejs. Мини-программа поддерживает: WeChat, Alipay, Baidu Smart, ByteDance, а мини-программа предлагает использовать showToast по умолчанию.
Документация API | Примеры, если вы просто нажмите ★Star .
Используйте НПМ:
npm install we-validator --saveИспользуйте CDN:
< script src =" https://unpkg.com/we-validator/dist/we-validator.min.js " > </ script > Ниже показано использование мини-программы WeChat, другие мини-программы аналогичны.
< form bindsubmit =" onSubmitForm " >
< input type =" text " name =" username " placeholder ="用户名" />
< input type =" number " name =" phoneno " placeholder ="手机号" />
< input type =" text " name =" str " placeholder ="长度为3的字符串" />
< button type =" default " formType =" submit " >提交</ button >
</ form > const WeValidator = require ( 'we-validator' )
Page ( {
onReady ( ) {
this . initValidator ( )
} ,
onSubmitForm ( e ) {
let { value } = e . detail
if ( ! this . validatorInstance . checkData ( value ) ) return
// 开始提交表单
// wx.request
} ,
initValidator ( ) {
// 实例化
this . validatorInstance = new WeValidator ( {
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
} ,
str : {
length : 3
} ,
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
} ,
str : { // 非必填字段
length : '请输入长度为3的字符串'
} ,
} ,
} )
} ,
} ) Вы также можете обратиться к соответствующим примерам в рамках текущего проекта.
Примечание. Настроенные правила будут проверяться только в том случае, если необязательные поля имеют значения.
| правило | описывать | Подсказка по умолчанию |
|---|---|---|
required: true | Необходимый | Это поле обязательно к заполнению |
pattern: /^d+$/ | Обычный генерал | Не соответствует этому правилу проверки |
email: true | Формат электронной почты | Пожалуйста, введите действительный адрес электронной почты |
mobile: true | 11-значный номер мобильного телефона | Пожалуйста, введите свой 11-значный номер мобильного телефона |
tel: true | Стационарный номер телефона, например: 010-1234567, 0551-1234567. | Пожалуйста, введите номер вашего стационарного телефона |
url: true | URL-адрес | Пожалуйста, введите действительный URL-адрес |
idcard: true | идентификационный номер | Пожалуйста, введите действительное 18-значное удостоверение личности. |
equalTo: 'field' | Проверка значения поля, например: пароль и подтверждение пароля, см. | Входное значение должно быть таким же, как field поля. |
notEqualTo: 'field' | Значения полей не могут быть одинаковыми. Проверка является противоположностью equalTo | Входное значение не может совпадать с field |
contains: 'str' | Содержит ли он определенный символ | Входное значение должно содержать str |
notContains: 'str' | не может содержать определенные символы | Входное значение не может содержать str |
length: 5 | Длина строки | Пожалуйста, введите 5 символов |
minlength: 2 | Минимальная длина строки | Требуется минимум 2 символа |
maxlength: 6 | Максимальная длина строки | Вы можете ввести до 6 символов |
rangelength: [2, 6] | строка определенного диапазона длин | Введите длину от 2 до 6 символов. |
number: true | число | Пожалуйста, введите действительный номер |
digits: true | положительное целое число | Можно вводить только положительные целые числа. |
integer: true | Положительное или отрицательное целое число | Можно вводить только целые числа |
min: 3 | Число больше определенного числа (минимальное количество ограничено), вы также можете сравнить значения полей, см. | Пожалуйста, введите число больше 3 |
max: 9 | Число меньше определенного числа (максимальное число может быть только определенным числом), также можно сравнивать значения полей. | Пожалуйста, введите число меньше 9 |
range: [3, 9] | Числа больше и меньше | Пожалуйста, введите число больше 3 и меньше 9 |
chinese: true | Китайские иероглифы | Можно вводить только китайские иероглифы |
minChinese: 3 | Минимальное количество китайских иероглифов | Введите не менее 3 китайских иероглифов |
maxChinese: 9 | Максимальное количество китайских иероглифов | Введите до 9 китайских иероглифов |
rangeChinese: [3, 9] | Сколько китайских иероглифов больше и меньше | Можно ввести только от 3 до 9 китайских иероглифов. |
date: true | Дата (по умолчанию для проверки используется new Date(value) ) | Пожалуйста, введите действительную дату |
dateISO: true | Дата (стандартный формат ISO) Например: 19.09.2019, 19.09.2019. | Пожалуйста, введите действительную дату (стандартный формат ISO) |
ipv4: true | IPv4-адрес | Пожалуйста, введите действительный адрес IPv4 |
ipv6: true | IPv6-адрес | Пожалуйста, введите действительный адрес IPv6 |
Создать экземпляр
Возвращает : object – validatorInstance
| параметр | тип | значение по умолчанию | описывать |
|---|---|---|---|
| параметры | object | ||
| [опции.правила] | object | Правила проверки полей | |
| [опции.сообщения] | object | Сообщение об ошибке поля проверки | |
| [options.onMessage] | function | Режим отображения сообщений об ошибках автоматически определяет среду по умолчанию. Мини-программа по умолчанию использует showToastОбычные веб-браузеры по умолчанию используют alert .Сторона Nodejs не выполняет обработку, рекомендуется настроить ее самостоятельно, подробности | |
| [options.multiCheck] | boolean | false | Проверка нескольких полей используется, когда необходимо проверить несколько полей одновременно и отображаются сообщения об ошибках. |
const WeValidator = require ( 'we-validator' )
new WeValidator ( {
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} )Проверьте данные, будут отображаться сообщения об ошибках и все правила полей будут проверены.
Возврат : boolean
| параметр | тип | значение по умолчанию | описывать |
|---|---|---|---|
| данные | object | Данные формы, которые необходимо проверить | |
| onMessage | function | Пользовательское сообщение об ошибке, подробности |
При проверке данных будет отображаться сообщение об ошибке. Для справки будут проверены только соответствующие поля.
Обычно используется для проверки одного или нескольких правил полей по отдельности.
Возврат : boolean
| параметр | тип | значение по умолчанию | описывать |
|---|---|---|---|
| данные | object | Данные формы, которые необходимо проверить | |
| поля | array | Правила поля проверки, обязательные. Например:['phoneNo'] проверяет только все правила для этого поля['phoneNo:required'] Проверяет только required правила этого поля.['phoneNo:required,mobile'] проверяет только required и mobile правила этого поля.['phoneNo', 'code'] проверяет только все правила этих двух полей | |
| onMessage | function | Пользовательское сообщение об ошибке, подробности |
Убедитесь, что данные действительны, и сообщение об ошибке не появится.
Сценарии использования, например: сценарии, в которых определенные поля в форме проверяются и их можно щелкнуть только после нажатия кнопки, для справки.
Возврат : boolean
| параметр | тип | значение по умолчанию | описывать |
|---|---|---|---|
| данные | object | Данные формы, которые необходимо проверить | |
| поля | array | Поля, подлежащие проверке, не передаются. По умолчанию проверяются все правила полей. Если таковые имеются, проверяются только соответствующие правила полей. Метод настройки такой же, как и .checkFields(data, fields) |
Динамическое добавление проверки полей, ссылка
| параметр | тип | значение по умолчанию | описывать |
|---|---|---|---|
| параметры | object | То же, что и new WeValidator(options) , подробности |
const WeValidator = require ( 'we-validator' )
const validatorInstance = new WeValidator ( {
rules : {
username : {
required : true
}
} ,
messages : {
username : {
required : '请输入用户名'
}
}
} )
// 动态添加校验
validatorInstance . addRules ( {
rules : {
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} )Динамическое удаление проверки полей, ссылка
| параметр | тип | значение по умолчанию | описывать |
|---|---|---|---|
| поля | array | Поля формы, которые необходимо удалить из проверки |
validatorInstance . removeRules ( [ 'username' ] ) Статический метод: добавьте собственные правила, см.
| параметр | тип | значение по умолчанию | описывать |
|---|---|---|---|
| имя_правила | string | Название правила | |
| правилоопция | object | Конфигурация правила | |
| [ruleOption.message] | string | Текст сообщения об ошибке по умолчанию может быть динамически вставлен в параметры, например,请输入长度在{0} 到{1} 之间的字符, см. | |
| [правилоОпция.правило] | function|regexp | Функция проверки правил должна возвращать boolean .Вы также можете напрямую написать регулярное выражение (если это просто проверка регулярного типа). |
const WeValidator = require ( 'we-validator' )
// 添加自定义规则（这两种写法一样）
WeValidator . addRule ( 'theRuleName' , {
message : '默认错误信息文字' ,
rule ( value , param ) {
return / d / . test ( value )
}
} )
WeValidator . addRule ( 'theRuleName' , {
message : '默认错误信息文字' ,
rule : / d /
} )
// 使用方式一，实例化
new WeValidator ( {
rules : {
field1 : {
theRuleName : true
}
} ,
messages : {
field1 : {
theRuleName : '提示信息'
}
}
} )
// 使用方式二，调用函数
WeValidator . checkValue ( 'theRuleName' , 'str' ) Статический метод: проверка функции
| параметр | тип | значение по умолчанию | описывать |
|---|---|---|---|
| имя_правила | string | Название правила | |
| ценить | string | Что необходимо проверить | |
| параметр | any | Перенесено в параметры правила |
Поддерживает все правила, поддерживаемые по умолчанию, а также поддерживает пользовательские правила.
// 必填
let b1 = WeValidator . checkValue ( 'required' , 'str' ) // true
// 不能小于6的数字
let b2 = WeValidator . checkValue ( 'min' , 'str' , 6 ) // false
// 大于2小于5的数字
let b3 = WeValidator . checkValue ( 'range' , 'str' , [ 2 , 5 ] ) // false Пользовательское сообщение об ошибке
Вы можете настроить его глобально или индивидуально, что очень гибко.
Приоритет: .checkData(data, onMessage) > new WeValidator({ onMessage }) > WeValidator.onMessage > Обнаружение по умолчанию.
Метод запроса сообщения по умолчанию: мини-программы по умолчанию используют showToast , браузеры по умолчанию используют alert , и на стороне Nodejs обработка не выполняется. Рекомендуется настроить его самостоятельно.
const WeValidator = require ( 'we-validator' )
// 1、全局配置
WeValidator . onMessage = function ( data ) {
/*
data 参数
{
msg, // 提示文字
name, // 表单控件的 name
value, // 表单控件的值
param // rules 验证字段传递的参数
}
*/
}
// 2、实例化配置
new WeValidator ( {
rules : { } ,
message : { } ,
onMessage : function ( data ) {
alert ( data . msg )
}
} )
// 3、验证的时候配置 onMessage（nodejs端校验可以使用此方式）
if ( ! obj . checkData ( formData , onMessage ) ) return
function onMessage ( data ) {
alert ( data . msg )
} Сценарии использования следующие: обратите внимание: если multiCheck имеет true , рекомендуется использовать собственный onMessage , см.
var validatorInstance = new WeValidator ( {
multiCheck : true ,
onMessage : function ( data ) {
console . log ( data ) ;
// 根据自己的项目去处理，控制错误信息的显示
} ,
rules : {
username : {
required : true
} ,
phoneno : {
required : true ,
mobile : true
}
} ,
messages : {
username : {
required : '请输入用户名'
} ,
phoneno : {
required : '请输入手机号' ,
mobile : '手机号格式不正确'
}
}
} ) ; Посмотреть журнал изменений
Если вы обнаружите ошибки во время использования или у вас есть хорошие предложения, пожалуйста, сообщите о них.
Copyright (c) 2019 ChanceYu
