Объяснение проверки формы Element Plus
Объяснение проверки формы Element Plus

Element Plus — это набор библиотек компонентов на основе Vue 3. Он предоставляет множество компонентов, помогающих разработчикам быстро создавать современные веб-приложения. В этой статье подробно описано, как выполнить проверку формы в Element Plus, объясняя использование каждой части на конкретных примерах.

Установить Элемент Плюс

в использовании Element Plus Перед этим его необходимо сначала установить. Предполагая, что у вас уже есть Vue 3 проект, вы можете пройти npm или yarn Установить Элемент Плюс：

Язык кода:bash
копировать
npm install element-plus

или ВОЗ：

Язык кода:bash
копировать
yarn add element-plus

После завершения установки Element Plus появится в файле записи существующего проекта:

Язык кода:javascript
копировать
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

Создать форму

Сначала создайте базовую структуру формы, используя компоненты, предоставляемые Element Plus:

Язык кода:vue
копировать
<template>
  <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
    <el-form-item метка="имя пользователя" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item метка="электронная почта" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item метка="пароль" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">представлять на рассмотрение</el-button>
      <el-button @click="resetForm">перезагрузить</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { reactive, ref } from 'vue'

export default {
  setup() {
    const form = reactive({
      username: '',
      email: '',
      password: ''
    })

    const rules = {
      username: [
        { required: true, message: «Пожалуйста, введите имя пользователя», trigger: 'blur' }
      ],
      email: [
        { required: true, message: «Пожалуйста, введите свой адрес электронной почты», trigger: 'blur' },
        { type: 'email', message: «Пожалуйста, введите правильный адрес электронной почты», trigger: 'blur' }
      ],
      password: [
        { required: true, message: «Пожалуйста, введите пароль», trigger: 'blur' },
        { min: 6, message: «Длина пароля не может быть меньше 6 символов», trigger: 'blur' }
      ]
    }

    const formRef = ref(null)

    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          alert('Отправка прошла успешно!')
        } else {
          console.log('Отправка не удалась!')
          return false
        }
      })
    }

    const resetForm = () => {
      formRef.value.resetFields()
    }

    return {
      form,
      rules,
      formRef,
      submitForm,
      resetForm
    }
  }
}
</script>

Объяснение кода

  1. Раздел шаблонов (template)：
    • <el-form>：Контейнер для всей формы,обязательность model отнести к form объект,используется для双向数据обязательность。ref Используется для ссылки на форму в методе существования.,rules для установки Правил валидации,label-width Установите ширину метки формы.
    • <el-form-item>：контейнер элементов формы。label 属性используется для设置表单项的标签,prop Свойства используются для связывания Правил. валидации。
    • <el-input>：Компонент поля ввода,использовать v-model Привязать данные.
    • <el-button>：компонент кнопки,Используется для отправки и сброса формы.
  2. часть сценария (script)：
    • reactive：创建响应式объект form,Используется для хранения данных формы.
    • ref：используется для创建对表单实例的引用 formRef。
    • rules：Форма магазина Правила валидации。
    • submitForm：представлять на рассмотрение表单时触发,вызов validate Метод проверяет всю форму.
    • resetForm：Сбросьте форму, сбросьте все значения полей к исходным значениям и удалите результаты проверки.

Подробное объяснение проверки формы

Правила валидации

существовать rules В объекте каждое поле соответствует массиву, и массив содержит одно или несколько Правил. валидацииобъект。каждый Правила Объект валидации может содержать следующие свойства:

  • required: Требуется ли это?
  • message: Подсказка в случае неудачной проверки.
  • trigger: Тип события, запускающего проверку, который может быть blur или change。
  • type: Тип данных, подлежащий проверке, который может быть string、number、boolean、method、regexp、integer、float、array、object、enum、date、url、hex、email。
  • min и max: Ограничьте минимальную и максимальную длину ввода (применяется только к string и array тип).
  • validator: Пользовательская функция проверки.

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

иногда встроенные Правила валидации могут быть не в состоянии удовлетворить спрос, в этом случае вы можете использовать Пользовательский валидатор。Пользовательский валидаторэто функция,принимает три параметра：rule,value,и callback。

Вот пример того, как добавить Пользовательский валидатор, чтобы проверить, занято ли имя пользователя:

Язык кода:javascript
копировать
const checkUsername = (rule, value, callback) => {
  if (!value) {
    return callback(new Ошибка («Пожалуйста, введите имя пользователя»))
  }

  // Имитация асинхронной проверки
  setTimeout(() => {
    if (value === 'admin') {
      callback(new Ошибка («Имя пользователя уже занято»))
    } else {
      callback()
    }
  }, 1000)
}

const rules = {
  username: [
    { validator: checkUsername, trigger: 'blur' }
  ]
}

Методы проверки формы

Element Plus предоставляет несколько методов для управления проверкой формы:

  • validate(callback): Проверьте всю форму。callback встречасуществовать验证完成后被вызов,и получает логический параметр,Указывает, пройдена ли проверка.
  • validateField(prop, callback): Проверка поля。prop Имя атрибута поля,callback Это функция обратного вызова после завершения проверки.
  • resetFields(): Сбросьте форму, сбросьте все значения полей к исходным значениям и удалите результаты проверки.
  • clearValidate(props): 移除表单项的校验结果。props Это массив, состоящий из атрибутов полей, которые необходимо удалить из проверки. Если не передать, результаты проверки всех полей будут удалены.

Вот примеры таких методов:

Язык кода:javascript
копировать
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      alert('Отправка прошла успешно!')
    } else {
      console.log('Отправка не удалась!')
      return false
    }
  })
}

const resetForm = () => {
  formRef.value.resetFields()
}

const validateUsername = () => {
  formRef.value.validateField('username', (valid) => {
    if (valid) {
      alert('Проверка имени пользователя пройдена')
    } else {
      console.log('Проверка имени пользователя не удалась')
    }
  })
}

const clearUsernameValidation = () => {
  formRef.value.clearValidate(['username'])
}

Полный пример

Вот полный пример, показывающий, как реализовать форму с проверкой формы с помощью Element Plus:

Язык кода:vue
копировать
<template>
  <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
    <el-form-item метка="имя пользователя" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item метка="электронная почта" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item метка="пароль" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">представлять на рассмотрение</el-button>
      <el-button @click="resetForm">перезагрузить</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { reactive, ref } from 'vue'

export default {
  setup() {
    const form = reactive({
      username: '',
      email: '',
      password: ''
    })

    const checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Ошибка («Пожалуйста, введите имя пользователя»))
      }

      // Имитация асинхронной проверки
      setTimeout(() => {
        if (value === 'admin') {
          callback(new Ошибка («Имя пользователя уже занято»))
        } else {
          callback()
        }
      }, 1000)
    }

    const rules = {
      username: [
        { validator: checkUsername, trigger: 'blur' }
      ],
      email: [
        { required: true, message: «Пожалуйста, введите свой адрес электронной почты», trigger: 'blur' },
        { type: 'email', message: «Пожалуйста, введите правильный адрес электронной почты», trigger: 'blur' }
      ],
      password: [


        { required: true, message: «Пожалуйста, введите пароль», trigger: 'blur' },
        { min: 6, message: «Длина пароля не может быть меньше 6 символов», trigger: 'blur' }
      ]
    }

    const formRef = ref(null)

    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          alert('Отправка прошла успешно!')
        } else {
          console.log('Отправка не удалась!')
          return false
        }
      })
    }

    const resetForm = () => {
      formRef.value.resetFields()
    }

    return {
      form,
      rules,
      formRef,
      submitForm,
      resetForm
    }
  }
}
</script>

Подвести итог

Element Plus Предоставляет мощные и гибкие функции проверки форм для удовлетворения различных сложных потребностей в проверке форм. Используя встроенные Правила валидациии Пользовательский валидатор, который позволяет добиться точного контроля элементов формы. Я надеюсь, что эта статья поможет вам лучше понять и использовать Element Plus функция проверки формы.

Я участвую в последнем конкурсе эссе для специального учебного лагеря Tencent Technology Creation 2024.,Приходите и разделите со мной главный приз!

boy illustration
Углубленный анализ переполнения памяти CUDA: OutOfMemoryError: CUDA не хватает памяти. Попыталась выделить 3,21 Ги Б (GPU 0; всего 8,00 Ги Б).
boy illustration
[Решено] ошибка установки conda. Среда решения: не удалось выполнить первоначальное зависание. Повторная попытка с помощью файла (графическое руководство).
boy illustration
Прочитайте нейросетевую модель Трансформера в одной статье
boy illustration
.ART Теплые зимние предложения уже открыты
boy illustration
Сравнительная таблица описания кодов ошибок Amap
boy illustration
Уведомление о последних правилах Points Mall в декабре 2022 года.
boy illustration
Даже новички могут быстро приступить к работе с легким сервером приложений.
boy illustration
Взгляд на RSAC 2024｜Защита конфиденциальности в эпоху больших моделей
boy illustration
Вы используете ИИ каждый день и до сих пор не знаете, как ИИ дает обратную связь? Одна статья для понимания реализации в коде Python общих функций потерь генеративных моделей + анализ принципов расчета.
boy illustration
Используйте (внутренний) почтовый ящик для образовательных учреждений, чтобы использовать Microsoft Family Bucket (1T дискового пространства на одном диске и версию Office 365 для образовательных учреждений)
boy illustration
Руководство по началу работы с оперативным проектом (7) Практическое сочетание оперативного письма — оперативного письма на основе интеллектуальной системы вопросов и ответов службы поддержки клиентов
boy illustration
[docker] Версия сервера «Чтение 3» — создайте свою собственную программу чтения веб-текста
boy illustration
Обзор Cloud-init и этапы создания в рамках PVE
boy illustration
Корпоративные пользователи используют пакет регистрационных ресурсов для регистрации ICP для веб-сайта и активации оплаты WeChat H5 (с кодом платежного узла версии API V3)
boy illustration
Подробное объяснение таких показателей производительности с высоким уровнем параллелизма, как QPS, TPS, RT и пропускная способность.
boy illustration
Удачи в конкурсе Python Essay Challenge, станьте первым, кто испытает новую функцию сообщества [Запускать блоки кода онлайн] и выиграйте множество изысканных подарков!
boy illustration
[Техническая посадка травы] Кровавая рвота и отделка позволяют вам необычным образом ощипывать гусиные перья! Не распространяйте информацию! ! !
boy illustration
[Официальное ограниченное по времени мероприятие] Сейчас ноябрь, напишите и получите приз
boy illustration
Прочтите это в одной статье: Учебник для няни по созданию сервера Huanshou Parlu на базе CVM-сервера.
boy illustration
Cloud Native | Что такое CRD (настраиваемые определения ресурсов) в K8s?
boy illustration
Как использовать Cloudflare CDN для настройки узла (CF самостоятельно выбирает IP) Гонконг, Китай/Азия узел/сводка и рекомендации внутреннего высокоскоростного IP-сегмента
boy illustration
Дополнительные правила вознаграждения амбассадоров акции в марте 2023 г.
boy illustration
Можно ли открыть частный сервер Phantom Beast Palu одним щелчком мыши? Супер простой урок для начинающих! (Прилагается метод обновления сервера)
boy illustration
[Играйте с Phantom Beast Palu] Обновите игровой сервер Phantom Beast Pallu одним щелчком мыши
boy illustration
Maotouhu делится: последний доступный внутри страны адрес склада исходного образа Docker 2024 года (обновлено 1 декабря)
boy illustration
Кодирование Base64 в MultipartFile
boy illustration
5 точек расширения SpringBoot, супер практично!
boy illustration
Глубокое понимание сопоставления индексов Elasticsearch.
boy illustration
15 рекомендуемых платформ разработки с нулевым кодом корпоративного уровня. Всегда найдется та, которая вам понравится.
boy illustration
Аннотация EasyExcel позволяет экспортировать с сохранением двух десятичных знаков.
©