Код IT
← Каталог

Справочник по Vue.js — Форма с валидацией

Фрагмент из «Справочник по Vue.js»: Форма с валидацией.

vue javascriptencyclopedia3-ecosystem-2-frontend-frameworks-2-vue-281 embed URL статья в энциклопедии
Vue main.vue 
<script setup>

import { ref } from 'vue'

const email = ref('')
const isValid = ref(true)

const validate = () => {
  isValid.value = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)
}
</script>

<template>
  <input v-model="email" @blur="validate" :class="{ error: !isValid }" />
  <p v-if="!isValid">Неверный email</p>
</template>
<script setup>

import { ref } from 'vue'

const email = ref('')
const isValid = ref(true)

const validate = () => {
  isValid.value = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)
}
</script>

<template>
  <input v-model="email" @blur="validate" :class="{ error: !isValid }" />
  <p v-if="!isValid">Неверный email</p>
</template>