下面是我的代码。在那里,名字,姓氏,中间名输入字段在那里。我想使用单一方法为这些字段抛出错误。我只能在 validator.extend 函数中传递一个字段。例如:Validator.extend('firstName', {});。但我想通过 Validator.extend('firstName','lastName', 'middleName', {});( 或 )Validator.extend('fieldNames', {}); 像这样。请帮忙。
<template>
<b-card>
<h4 slot="header" class="card-title">Employee</h4>
<b-row>
<b-col sm="3">
<b-form-group>
<label for="name">First Name </label>
<input type="text" id="name" class="form-control" placeholder="Enter your name" v-validate="'required|firstName'" name="firstName">
<span v-show="errors.has('firstName')" class="is-danger">{{ errors.first('firstName') }}</span>
</b-form-group>
</b-col>
<b-col sm="3">
<b-form-group>
<label for="name">Last Name </label>
<input type="text" id="name" class="form-control" placeholder="Enter your middle name" v-validate="'required|lastName'" name="lastName">
<span v-show="errors.has('lastName')" class="help is-danger">{{ errors.first('lastName') }}</span>
</b-form-group>
</b-col>
<b-col sm="3">
<b-form-group>
<label for="name">Middle Name </label>
<b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
</b-form-group>
</b-col>
</b-row>
<b-row>
<b-col sm="3">
<b-form-group>
<label for="name">Employee ID</label>
<b-form-input type="text" id="name" placeholder="ID"></b-form-input>
</b-form-group>
</b-col>
<b-col sm="3">
<b-form-group>
<label for="name">Gender</label>
<b-form-input type="text" id="name" placeholder="Gender"></b-form-input>
</b-form-group>
</b-col>
<b-col sm="3">
<b-form-group>
<label for="name">Nationality</label>
<b-form-input type="text" id="name" placeholder="Nationality"></b-form-input>
</b-form-group>
</b-col>
</b-row>
<input type="submit" value="Submit" @click="validateForm">
</b-card>
</template>
<script>
import Vue from 'vue'
import VeeValidate from 'vee-validate';
import { Validator } from 'vee-validate';
Vue.use(VeeValidate);
export default {
name: 'addEmpl',
created: function() {
Validator.extend('firstName', {
getMessage: field => 'Enter valid first name',
validate: value => /^[a-zA-Z]*$/.test(value)
});
},
methods: {
validateForm() {
this.$validator.validateAll();
}
}
}
</script>
<style lang="scss" scoped>
.is-danger{
color: RED;
}
</style>