唯一电子邮件地址的 Vee 验证

Question

我将电子邮件存储在一个名为“emailsDB”的数组中，并尝试检查用户在电子邮件输入字段中输入的电子邮件是否存在于数组中。

此处提供了我所遵循的确切步骤 - https://www.npmjs.com/package/vee-validate

但是，在实施时，我在控制台中收到错误消息 -

SyntaxError: import 声明只能出现在顶层 模块

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

结果应该是什么图像： How the implementation should work

Answer 1

错误import declarations may only appear at top level of a module表示当您在脚本中使用import时，之前可能不会出现其他指令。

因此，您需要在任何导入后移动 Vue.use(VeeValidate); 行：

import { ValidationProvider } from 'vee-validate';
Vue.use(VeeValidate);
Vue.config.productionTip = false;
Vue.component('ValidationProvider', ValidationProvider);
const emailsDB = ["viveks.nair1988@gmail.com"];

...

这与vee-validate 本身无关。