Question

我将电子邮件存储在名为“ 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

结果应为的图像： How the implementation should work

Answer 1

错误 import声明可能仅出现在模块的顶层，这意味着当您在脚本中使用then时，之前不会出现其他指令。

因此，您需要在任何导入之后移动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验证

1 个答案: