javascript — проверка формы для электронной почты, не работающей в Vuejs

Проверка формы для электронной почты, не работающей в Vuejs

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

 {amp}lt;form class="footer-form" id="footerform-details" @submit="checkForm" action="#" method="post" {amp}gt; {amp}lt;div class="form-group" id="footerbtn-tooltip"{amp}gt; {amp}lt;input type="email" class="form-control" placeholder="Your Email Address" v-model="email" {amp}gt; {amp}lt;button type="submit"{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;p v-if="errors.length"{amp}gt; {amp}lt;b{amp}gt;Please enter the following input value{amp}lt;/b{amp}gt; {amp}lt;ul{amp}gt; {amp}lt;li v-for="error in errors"{amp}gt;{{ error }}{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/p{amp}gt; {amp}lt;/form{amp}gt; 

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

 var subscribe = new Vue({ el: '#footerform-details', data: { email: null }, methods: { checkForm: function (e) { e.preventDefault(); if (this.email) { return true; } this.errors = []; if (!this.email) { this.errors.push('Email required.'); } } }, computed: { errors: function() { if (!this.email) { return ['Email required.']; // can make it [...this.errors, 'Email required.'] } else { return [] } } }, }) 

дайте мне знать, если это работает, возможны дополнительные оптимизации. Если это форма электронной почты для подписки, то это всегда будет один ввод, так что вы можете преобразовать ошибку в объект или просто строку, очищающую ваш оператор htmp v-for .

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector