element-ui -- Тщательно разберитесь с проверкой формы в element-ui

Vue.js

Разберитесь с проверкой формы в element-ui

(Сначала поставьте себе лайк b(￣▽￣)d)

основное использование

Пример парсинга официальной кастомной валидации

Просто посмотрите официальные документы для базового использования.Здесь я буду разбирать официальные документы.

Официальный документ должен написать такой пример(Чуть длиннее, упрощу, следующим образом)

это вид

<el-form :model="ruleForm" :rules="rules">
    <el-form-item label="密码" prop="pass">
        <el-input v-model="ruleForm.pass"></el-input>
    </el-form-item>
</el-form>

Вы можете узнать, увидев код выше, то есть использоватьel-form, а затем используйтеel-form-item
el-formНеобходимо передать два параметра,modelа такжеrules, modelявляется объектом данных формы,rulesДа Правила проверки формы.
el-form-itemнужно передать параметр(Это самый основной параметр, конечно есть и другие),propиспользуется для перепискиrulesзначение внутри

правило:

  • Значение, используемое в форме, должно быть в модели, чтобы его можно было считать соответствующим спецификации.
  • правила соответствуют реквизиту
  • После того, как prop соответствует правилам, значение в rules соответствуетmodel[prop]
  • Если в кб есть ошибка, то она будет извлечена и отображена, если пусто, то проверка пройдена.

Итак, официальный код js выглядит следующим образом

js (упрощенный)

ruleForm: {
  pass: '',
},
rules: {
  pass: [
    { 
        validator: (rule, value, callback) => {
            if (!value) {
              return callback(new Error('请输入密码'));
            }
            callback();
        },
        trigger: 'blur'
    }
  ],
}

Значение здесь соответствует третьему правилу вышеуказанного правила
Тогда правилу cb соответствует четвертое правило

На этом мы закончили чтение официальных документов. Еще один апи внизу слева. Так что о проверке мы используем этот способ достаточно.

Расширенное использование

Сцена 1

Но если это вложенная структура, то есть представление длинное вот так

<el-form :model="form" :rules="rules">
    <el-form-item v-for="(item, index) in form.list" :key="item.id" label="章节" prop="chapter">
        <el-input v-model="item.name"></el-input>
    </el-form-item>
</el-form>

Что делать, если мы хотим проверить данные в нем.

Всего два метода

  • вложенная форма
  • prop использует точечные выражения

Первый слишком ограниченный и более хлопотный, да и сбросить данные хлопотнее, так что проходите.
Во-вторых, это

:prop[`list[${index}].name`]

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

Модифицированный код выглядит следующим образом

// view 部分
<el-form :model="form" :rules="rules">
    <el-form-item v-for="(item, index) in form.list" :key="item.id" label="章节" :rules="rules['catpter_name'][0]" :prop[`list[${index}].name`]>
        <el-input v-model="item.name"></el-input>
    </el-form-item>
</el-form>
// js部分
form: {
    list: [
        {name: ''}
    ]
},
rules: {
  catpter_name: [
    {
        validator: (rule, value, callback) => {
            if (!value) {
              return callback(new Error('请输入章节名称'));
            }
            callback();
        },
        trigger: 'blur'
    }
  ],
}

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

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

сцена вторая

Это не просто описать, пришлю фото, не знаю, смогу ли внятно описать

Если я не понимаю, что я имею в виду, пришлите другой код

Сейчас

На этот раз нам нужно пойти на хитрость, так какpropсвязаны внутриrulesНе могу, тогда используйel-form-itemвнутриrulesатрибут, напишите функцию в атрибуте и передайте параметры в прошлом. так

:rules="list_item_rule(item)"  prop="list_item_prop_key"

ЗапомнитьpropОн не может упасть, иначе он не будет работать, хотя сейчас он не имеет смысла существовать. Значение в prop рекомендуется писать_, а затем добавьте еще одну форму_Атрибуты.

правила:

(item) => ({
    required: true, 
    validator:  (rule, _, cb) => {
        // item 就是数据啦，可以校验了
    }
})

-- над --

Категории