Я храню электронные письма в массиве 'emailsDB' и пытаюсь проверить, существует ли в массиве электронная почта, введенная пользователем в поле ввода электронной почты.
Точные шаги, которые я выполнил,здесь - https://www.npmjs.com/package/vee-validate
Однако при реализации в консоли появляется сообщение об ошибке -
SyntaxError: объявления импорта могут появляться только на верхнем уровне модуля
HTML-код
<div id="updateName" class="wrapper wrapper-right">
<div class="wrapper-inner full-height">
<!--Contact Sec-->
<section>
<!--form sec-->
<section class="animated container-fluid align-center sec-ptop">
<h3 class="salutation">
Hey <span v-if='formData.Name.length'>{{formData.Name}}</span> <span v-else>There</span>, happy to hear from you.
</h3>
<div>
<form v-on:submit.prevent="validateBeforeSubmit" name="contactform" method="post" class="row form-horizontal" role="form" novalidate="true">
<div class="form-group input--josh col-6">
<div class="input-wrap">
<input autocomplete="off" type="text" v-model="formData.Name" v-validate="'required'" id="Name" name="Name" placeholder="Name" class="form-control input__field input input__field--josh" :class="{'input': true, 'is-danger': errors.has('Name') }" />
<i v-show="errors.has('Name')" class="fa fa-exclamation"></i>
<label for="Name" class="input__label input__label input__label--josh input__label--josh-color-1 input__label--josh input__label--josh-color-1"></label>
</div>
<span v-show="errors.has('Name')" class="help is-danger">{{ errors.first('Name') }}</span>
</div>
<div class="form-group input--josh col-6">
<div class="input-wrap">
<input autocomplete="off" type="email" v-model="formData.Email" v-validate="'required|email'" id="Email" name="Email" placeholder="Email" class="form-control input input__field input__field--josh" :class="{'input': true, 'is-danger': errors.has('Email') }">
<i v-show="errors.has('Email')" class="fa fa-exclamation"></i>
<label for="Email" class="input__label input__label--josh input__label--josh-color-1"></label>
</div>
<span v-show="errors.has('Email')" class="help is-danger">{{ errors.first('Email') }}</span>
</div>
<div class="form-group input--josh col-12">
<div class="input-wrap">
<textarea rows="4" v-model="formData.Message" v-validate="'required'" id="Message" name="Message" placeholder="message" class="form-control input input__field input__field--josh" :class="{'input': true, 'is-danger': errors.has('Message') }"></textarea>
<i v-show="errors.has('Message')" class="fa fa-exclamation"></i>
<label for="Message" class="input__label input__label--josh input__label--josh-color-1"></label>
</div>
<span v-show="errors.has('Message')" class="help is-danger">{{ errors.first('Message') }}</span>
</div>
<div class="form-group col-12">
<div class="align-center">
<button type="submit" class="btn btn-default" data-ng-disabled="submitButtonDisabled">
<span class="mask"></span>
send
</button>
</div>
</div>
</form>
</div>
</section>
<!--/Contact Sec-->
</div>
</div>
Код Vue
Vue.use(VeeValidate);
import { ValidationProvider } from 'vee-validate';
Vue.config.productionTip = false;
Vue.component('ValidationProvider', ValidationProvider);
const emailsDB = ["viveks.nair1988@gmail.com"];
var app = new Vue({
el: '#updateName',
mounted() {
const isUnique = value =>
new Promise(resolve => {
setTimeout(() => {
if (emailsDB.indexOf(value) === -1) {
return resolve({
valid: true
});
}
return resolve({
valid: false,
data: {
message: `${value} has already reached out to me!`
}
});
}, 200);
});
Validator.extend("unique", {
validate: isUnique,
getMessage: (field, params, data) => data.message
});
}
})
Рабочий пример - https://codesandbox.io/s/y3504yr0l1?initialpath=%2F%23%2Fbackend&module=%2Fsrc%2Fcomponents%2FBackend.vue
Изображение того, каким должен быть результат: Как должна работать реализация