element-ui-verify

Если вам надоел собственный метод проверки Ele.me ElementUI, попробуйте!

предисловие

Вы голодны? ElementUI хорош, но опыт проверки формы не идеален

Если при разработке продукта следует обращать внимание на пользовательский опыт, то при разработке подключаемых модулей следует также уделять внимание опыту разработки, а хороший опыт разработки должен быть гарантирован хорошим дизайном API.

Я занимаюсь разработкой подключаемых модулей проверки в течение 30 лет, и у меня есть наследственный дизайн API-интерфейса подключаемого модуля проверки (шутка). В основном ссылаясь на то, что было написано ранееvue-verify-popапи, и улучшай его, возьми эссенцию, избавься от ее примеси, и натри эссенцию солнца и луны. . .

Этот плагин просто инкапсулирует исходный метод проверки ElementUI, а основной валидатор по-прежнемуasync-validator, ненавязчивый, не повлияет на дальнейшее использование встроенной проверки ElementUI.

Установить

npm install element-ui-verify

использовать

окружающая обстановка

VUE版本：2.x webpack模块环境

Один, установить

import Vue from 'vue'
import elementUI from 'element-ui'
import elementUIVerify from 'element-ui-verify'

// 这里注意必须得先use elementUI
Vue.use(elementUI)
Vue.use(elementUIVerify)

Во-вторых, настройте правила проверки для элемента электронной формы.

<template>
  <el-form :model="model">
    <el-form-item prop="age" verify number>
      <el-input v-model.number="model.age"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
export default{
  data () {
    return {
      model: {
        age: ''
      }
    }
  }
}
</script>

хорошо, вы выполнили базовую проверку того, что содержимое не может быть пустым и является числом! (Добро пожаловать, чтобы сравнить аналогичные примеры официальной версии)

Правила проверки поддерживаются по умолчанию

длина: проверить длину текста
minLength: минимальная длина проверочного текста.
gt: контрольная цифра должна быть больше определенного числа
gte: контрольная цифра должна быть больше или равна определенному числу
lt: контрольная цифра меньше определенного числа
LTE: проверочное число меньше, чем равно числу
maxDecimalLength: контрольная цифра максимального десятичного разряда
число: проверьте, является ли это числом
int: проверить, является ли это целым числом
телефон: проверьте, является ли это номером мобильного телефона (по мере увеличения сегмента номера может потребоваться его обновление в будущем)
электронная почта: проверьте, является ли это адресом электронной почты
verifyCode: проверьте, является ли это 6-значным проверочным кодом.

настроить

errorMessage

Шаблон сообщения об ошибке. По умолчанию:Шаблон по умолчанию

Чтобы использовать собственный шаблон, его содержимое необходимо переопределить.Шаблон по умолчаниюВсе поля, определенные в

fieldChange

Поведение плагина по умолчанию при изменении связанного поля. По умолчанию: «проверить»

Примечание. Проверка всегда запускается, когда поле ввода теряет фокус.

verify

Когда поле привязки изменится, проверка будет запущена в режиме реального времени.

clear

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

Vue.use(elementUIVerify, {
  errorMessageTemplate: yourErrorMessageTemplate,
  fieldChange: 'clear'
})

Важные параметры Описание

verify

Чтобы использовать этот плагин, требуется опция проверки, Другими словами, если эта опция не настроена, вы все равно можете использовать встроенную проверку ElementUI.

Опция также может получать значение функции дляпользовательский метод проверки

errorMessage

Используется для настройки сообщения об ошибке проверки (空检测和自定义校验方法的错误提示不受该值影响)

<el-form-item prop="numberProp" verify number error-message="请输入正确的数字"></el-form-item>

canBeEmpty

По умолчанию плагин включает проверку того, что входное содержимое не пусто.Если эта опция включена, как только элемент ввода пуст, все проверки после элемента ввода будут игнорироваться.

Этот параметр обычно используется в следующих случаях, например, код приглашения, который обычно может быть пустым, но не является пустым и требует проверки.

<!--当邀请码不为空时才校验长度是否等于6-->
<el-form-item prop="invitationCode" verify can-be-empty :length="6" error-message="邀请码不正确"></el-form-item>

space

Когда подключаемый модуль выполняет обнаружение пустых значений, он по умолчанию игнорирует пробелы, то есть, если в поле ввода введены только пробелы, он не пропустит обнаружение пустых значений, если не установлен этот параметр.

<el-form-item prop="test" verify space></el-form-item>

alias

插件保留Macro

Евангелие для ленивых, используется для повторного использования подсказок об ошибках, значение по умолчанию: «этот элемент ввода». используемые сцены:

Предположим, ваш шаблон подсказки об ошибке обнаружения нуля:

{empty: '{alias}不能为空'}

Содержание формы:

<el-form-item prop="unknown" verify></el-form-item>
<el-form-item alias="姓名" prop="name" verify></el-form-item>
<el-form-item label="地址" prop="address" verify></el-form-item>

когдаunknownКогда поле ввода пусто, появится сообщение «Этот элемент ввода не может быть пустым» (значение псевдонима по умолчанию равно «этот элемент ввода»).
когда姓名Когда поле ввода пусто, появится сообщение «Имя не может быть пустым» (когда значение псевдонима задано явно, содержимое приглашения естественным образом заменит шаблон этим значением)
когда地址Когда поле ввода пусто, оно подскажет «адрес не может быть пустым» (большинству элементов el-form необходимо установить элемент метки, а элемент метки часто представляет собой псевдоним элемента ввода, поэтому плагин примет это значение прямо как псевдоним, очень внимательный и древесный)

fieldChange

см. глобальныйfieldChangeнастроить

watch

Отслеживайте другие переменные и запускайте самопроверку

Типичный пример: проверка согласованности пароля, изменение пароля1 вызовет проверку пароля2 (Добро пожаловать, чтобы сравнить аналогичные примеры официальной версии)

<template>
  <el-form :model="model">
    <el-form-item label="密码" prop="pass1" verify>
      <el-input v-model="model.pass1"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="pass2" :verify="verifyPassword" :watch="model.pass1">
      <el-input v-model="model.pass2"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
export default{
  data () {
    return {
      model: {
        pass1: '',
        pass2: ''
      }
    }
  },
  methods: {
    verifyPassword (rule, val, callback) {
      if (val !== this.pass1) callback(Error('两次输入密码不一致!'))
      else callback()
    }
  }
}
</script>

Другой сценарий, который не подходит для использования этой опции, такой как следующий пример минимального и максимального количества людей, изменение минимального количества людей должно инициировать проверку максимального количества людей:

<template>
  <el-form :model="model">
    <el-form-item label="最少参与人数" prop="minNumber" verify int :gt="0">
      <el-input v-model.number="model.minNumber"></el-input>
    </el-form-item>
    <el-form-item label="最多参与人数" prop="maxNumber" verify int :gt="model.minNumber" :watch="minNumber">
      <el-input v-model.number="model.maxNumber"></el-input>
    </el-form-item>
  </el-form>
</template>

На самом деле вариант с часами здесь совершенно не нужен, т.к.插件会响应所有校验参数的变化来触发自身校验, максимальное количество участниковgtуказанное значениеmodel.minNumber,однаждыmodel.minNumberизменения, это инициирует проверку

Если вы посмотрите его снова, он сработает еще раз. Итак, это работает:

<el-form-item label="最多参与人数" prop="maxNumber" verify int :gt="model.minNumber"></el-form-item>

Меры предосторожности

Все вызовы опций не могут иметь заглавные буквы, разделенные тире, так же, как правила настройки свойств vue props.
Length, minLength, gt, gte, lt, lte, maxDecimalLength и другие параметры, которые должны получать числовые значения, значение должно быть числом (:length="1")
Как только параметры, которым не нужно получать значения, такие как verify, canBeEmpty, space, number, int и т. д., установлены, их можно назначить какundefinedотменить

стенография правила

Такие параметры, как номер, инт, телефон и т. д., которые не нужно задавать, можно напрямую:

<el-form-item prop="prop" verify number></el-form-item>
<!--不用这么写-->
<el-form-item prop="prop" verify :number="true"></el-form-item>

Числовые правила, такие как gt,gte,lt,lte,maxDecimalLength, не требуют записи числовых правил.

<!--该输入项内容必须为不大于10的数字-->
<el-form-item prop="prop" verify :lte="10"></el-form-item>
<!--不用这么写-->
<el-form-item prop="prop" verify number :lte="10"></el-form-item>

Глобальный API

addRule (name: string | VerifyRulePropOptions, getter: RuleGetter): RuleGetter

используется дляпользовательские правила проверки

`name`: имя правила

Параметры проверки этого плагина основаны на компоненте Vue.Prop, поэтому параметр может быть элементом конфигурации, подобным VueProp:

{
  name: 'length',
  type: Number,
  validator (v) {
     return v > 0
  }
}

Преимущество этого заключается в том, что вы также можете ограничить значение, получаемое правилом, и заранее избежать некоторых ненужных ошибок вызова, таких как:

<el-form-item prop="prop" verify length="哈哈哈"></el-form-item>

В приведенной выше ситуации очень вероятно, что ваше правило проверки длины текста будет ненормальным. Конечно, если вы больше доверяете вызывающему или вам не нужно получать значение, вы можете просто сделать это:

import elementUIVerify from 'element-ui-verify'
elementUIVerify.addRule('length', length => SomeRule)

`getter`: метод получения asyncValidatorRule

Обратный вызов может возвращать одно правило или массив правил. Конкретные правила см.async-validator

// 单条
() => ({type: 'number', message: '请输入数字'})
// 多条
gte => [
  {type: 'number', message: '请输入数字'},
  {type: 'number', min: gte, message: `该数字不能小于${gte}`}
]

Если несколько правил в приведенном выше примере определены повторноtypeДля сомневающихся см.здесь

getRule (name: string): RuleGetter

Используется для получения правил проверки. вообще ипользовательские правила проверкиИспользуется вместе для облегчения повторного использования существующих правил

Возвращаемый контентaddRuleвходящийgetterпараметр

getErrorMessage (name: string, templateData?: any): string

Используется для получения сообщения об ошибке из универсального шаблона сообщения об ошибке. вообще ипользовательские правила проверкиДля использования с

Предположим, что шаблон сообщения об ошибке

{
  // 没有Macro
  empty: '该输入项内容不能为空',
  // Macro正好等于RuleName
  length: '该输入项内容长度需要等于{length}',
  // Macro不等于RuleName
  maxDecimalLength: '该输入项最多接受{MDL}位小数'
}

Пример вызова:

import elementUIVerify from 'element-ui-verify'
// 返回："该输入项内容不能为空"
elementUIVerify.getErrorMessage('empty')
// 返回："该输入项内容长度需要等于10"
elementUIVerify.getErrorMessage('length', 10)
// 返回："该输入项最多接受2位小数"
elementUIVerify.getErrorMessage('maxDecimalLength', {MDL: 2})

пользовательский метод проверки

Если встроенные правила проверки не могут удовлетворить ваши потребности, вы можете вставить свои собственные правила проверки.Метод проверки

Пользовательский метод проверки не будет выполняться до тех пор, пока не будут переданы правила проверки.

<template>
  <el-form :model="model">
    <el-form-item label="卡号" prop="cardNumber" :verify="verifyCardNumber" :length="6">
      <el-input v-model.number="model.cardNumber"></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
export default{
  data () {
    return {
      model: {
        cardNumber: ''
      }
    }
  },
  methods: {
    // callback形式
    // 校验是否是010，011开头的卡号
    verifyCardNumber (rule, val, callback) {
      // rule: 这个参数很恶心，不经常用到还要放在第一位，不过为了保持async-validator的风格，还是留着它了
      // val: 待校验值
      // callback: 校验结果回调 具体可以点击上文的"校验方法"链接查看
      if (['010', '011'].indexOf(val.substr(0, 3)) === -1) callback(Error('错误的卡号'))
      else callback()
    }
  }
}
</script>

пользовательские правила проверки

Отличие от пользовательского метода проверки заключается в том, что он применяется ко всему миру, что эквивалентно добавлению правил проверки, поставляемых с плагином.

Как упоминалось в предисловии, основной валидатор этого плагина исходит от async-validator, поэтому сначала вам нужно обратиться к его правилам валидации.Документация

Пример 1. Добавьте правило, чтобы проверить, является ли это 10-значным целым числом.

import elementUIVerify from 'element-ui-verify'
// 通过getRule方法复用已有的int规则
const intRuleGetter = elementUIVerify.getRule('int')
elementUIVerify.addRule('int10', () => [
  // 首先校验是否为整数
  intRuleGetter(),
  // 再校验是否为10位
  {
    validator (rule, val, callback) {
      if ((val + '').length !== 10) {
        // 尽量将出错提示定义在错误模板中（假设为{int10: '该输入项为10位整数'}）
        const errorMessage = elementUIVerify.getErrorMessage('int10')
        callback(Error(errorMessage))
      } else callback()
    }
  }
])

Это завершает простое расширение правила, и вы можете вызывать свое собственное правило где угодно, как правило по умолчанию, следующим образом:

<el-form-item prop="prop" verify int10></el-form-item>

Пример 2. Добавьте новое правило, чтобы проверить, является ли оно произвольным целым числом. Отличие от приведенного выше состоит в том, что правилу необходимо получить параметр правила.

import elementUIVerify from 'element-ui-verify'
const intRuleGetter = elementUIVerify.getRule('int')
// 这里最好不要再直接传入'intLength'了，而是一个类似VueProp的配置项，来对规则参数稍作限制
elementUIVerify.addRule({name: 'intLength', type: Number}, intLength => [
  intRuleGetter(),
  // 校验整数长度是否符合规则
  {
    validator (rule, val, callback) {
      if ((val + '').length !== intLength) {
        // 假设出错模板为{intLength: '该输入项为{intLength}位整数'}
        const errorMessage = elementUIVerify.getErrorMessage('intLength', intLength)
        callback(Error(errorMessage))
      } else callback()
    }
  }
])

передача:

<el-form-item prop="prop" verify :int-length="10"></el-form-item>

Дополнительные примеры вы можете посмотреть непосредственно в этом плагине.исходный кодДобавление правил по умолчанию в

Проверка плагина по умолчанию не проходит шаблон приглашения

{
  empty: '请补充该项内容',
  length: '请输入{length}位字符',
  minLength: '输入内容至少{minLength}位',
  number: '请输入数字',
  int: '请输入整数',
  lt: '输入数字应小于{lt}',
  lte: '输入数字不能大于{lte}',
  gt: '输入数字应大于{gt}',
  gte: '输入数字不能小于{gte}',
  maxDecimalLength: '该输入项最多接受{maxDecimalLength}位小数',
  phone: '请输入正确的手机号',
  email: '请输入正确的邮箱',
  verifyCode: '请输入正确的验证码'
}

Общая проблема

Почему бы не убить элемент конфигурации реквизита? Надоедает каждый раз писать правила валидации!

меня тоже раздражает. Однако этот плагин основан на ElementUI, поэтому многие места будут ограничены оригинальным механизмом проверки, и он не должен максимально на него влиять. Например, эта опция prop, если ее убрать, повлияет на проверку эл-формы, т.к. ElementUI использует prop как uid для хранения очереди проверки

Как переключить тип проверки? Например, в поле ввода может быть введен номер мобильного телефона или адрес электронной почты.

<el-form-item prop="prop" verify phone v-if="isPhone"></el-form-item>
<el-form-item prop="prop" verify email v-else></el-form-item>

Это также можно сделать, когда правила не сильно меняются (проверка будет срабатывать сразу при переключении типа таким образом)

<el-form-item prop="prop" verify :phone="isPhone ? true : undefined" :email="isPhone ? undefined : true"></el-form-item>

разное

пишуgteправил, я сначала обращаюсь к правилам числового типа асинхронного валидатора, а затем обращаюсь к егоПравила диапазона, а его правила Range поддерживают как строки, так и числа, поэтому проверку чисел необходимо снова явно задатьtype: number, хотя это приводит кgteПравило может проверять, является ли тип числом дважды, но это мало влияет на производительность.

// 这里的min显然是要校验数字的
[
  {type: 'number'},
  {min: 3}
]
// 然而你必须得写成
[
  {type: 'number'},
  {type: 'number', min: 3}
]
// 当然了你也可以通过写自定义校验函数来规避此问题，不过此问题没这个必要
[
  {type: 'number'},
  {
    validator (rule, val, callback) {
      if (val < 3) callback(Error('不能小于3'))
    }
  }
]

Это нельзя считать недостатком асинхронного валидатора, исходя из его текущих правил и соглашений, если правила выводятся, преимущества будут невелики, а неопределенность правил проверки будет увеличена, что вызовет путаницу у пользователей. абонент. Однако, если это только для этого требования, вы можете рассмотреть возможность разделения правил диапазона текста и чисел.

Здесь вы можете спросить, почему бы просто не использовать одно правило?

{type: 'number', min: 3, errorMessage: 'xxxx'}

Если это так, сообщение об ошибке для нечислового ввода будет содержимым исходного шаблона сообщения об ошибке. Чтобы не разрушить встроенную проверку ElementUI (изменить исходный шаблон сообщения об ошибке) и максимально повторно использовать встроенную проверку асинхронного валидатора, мы должны разделить правила, чтобы сделать сообщение об ошибке проверки более конкретным.

Позже, когда вы настроите правила проверки, если вы столкнетесь с похожими проблемами, вы также можете рассмотреть возможность разделения правил, чтобы сделать сообщение об ошибке более конкретным.

позже

Поскольку параметры проверки этого плагина основаны на VueProp, у него есть следующие недостатки:

С обновлением ElementUI в будущем могут возникнуть конфликты с некоторыми его новыми опциями.
Сложно выполнить проверку в соответствии с порядком написания правил проверки. Текущий порядок: обнаружение нулей > общие правила > пользовательский метод проверки. Однако влияние этой статьи не очень велико, и в большинстве сценариев по существующим правилам нет необходимости учитывать порядок правил.

element-ui-verify

предисловие

Установить

использовать

окружающая обстановка

Один, установить

Во-вторых, настройте правила проверки для элемента электронной формы.

Правила проверки поддерживаются по умолчанию

настроить

errorMessage

fieldChange

verify

clear

Важные параметры Описание

verify

errorMessage

canBeEmpty

space

alias

fieldChange

watch

Меры предосторожности

стенография правила

Глобальный API

addRule (name: string | VerifyRulePropOptions, getter: RuleGetter): RuleGetter

name: имя правила

getter: метод получения asyncValidatorRule

getRule (name: string): RuleGetter

getErrorMessage (name: string, templateData?: any): string

пользовательский метод проверки

пользовательские правила проверки

Проверка плагина по умолчанию не проходит шаблон приглашения

Общая проблема

разное

позже

`name`: имя правила

`getter`: метод получения asyncValidatorRule