return resolve({
valid: true
});
}
return resolve({
valid: false,
data: {
message: `${value} 已存在.`
}
});
}, 200);
});
Validator.extend('unique', {
validate: isUnique,
getMessage: (field, params, data) => data.message
});
使用：
<el-col :span="4" class="form-label">
<label>邮箱</label>
</el-col>
<el-col :span="8">
<el-input name="email" v-model="email" v-validate="'unique'" data-vv-delay="1000"></el-input>
<span v-show="errors.first('email:unique')" class="error">重复</span>
</el-col>结果：
其中
data-vv-delay="1000” 就是延迟校验的使用。1000即1000毫秒以下是几个例子的完整代码：
<template>
<div>
<el-form name="myForm" novalidate>
<el-row>
<el-col :span="4" class="form-label">
<label>邮箱</label>
</el-col>
<el-col :span="8">
<el-input name="email" v-model="email" v-validate="'unique'" data-vv-delay="1000"></el-input>
<span v-show="errors.first('email:unique')" class="error">重复</span>
</el-col> <el-col :span="4" class="form-label">
<label>用户名</label>
</el-col>
<el-col :span="8">
<el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
<span v-show="errors.first('userName:required')" class="error">用户名为必填项</span>
<span v-show="errors.first('userName:min')" class="error">用户名的最小长度为2</span>
<span v-show="errors.first('userName:max')" class="error">用户名的最大长度为20</span>
</el-col>
<!-- <el-col :span="8">
<el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
<span v-show="errors.has('userName')" class="error">{{ errors.first('userName') }}</span>
</el-col> -->
</el-row>
</el-form>
</div>
</template>
<script>
import { Validator } from 'vee-validate';
const emailsDB = [
'abcd@cc.com'
];
const isUnique = value => new Promise((resolve) => {
setTimeout(() => {
if (emailsDB.indexOf(value) === -1) {
return resolve({
valid: true
