vue.js - 如何在 vuejs2 中使用 vee-validation 为输入字段编写自定义/通用验证
问题描述
下面是我的代码。在那里,名字,姓氏,中间名输入字段在那里。我想使用单一方法为这些字段抛出错误。我只能在 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>
解决方案
您可以将对象传递给您的自定义验证(甚至在方法中返回它):
<input placeholder="Enter your name" v-validate="validations('firstName')">
created() {
Validator.extend('fieldName', {
getMessage(field, val) {
return `Enter valid ${val}`
},
validate(value, field) {
if (field == 'firstName') { return /^[a-zA-Z]*$/.test(value) }
else if (field == 'lastName') { return /^[a-z]*$/.test(value) }
// and so on
}
})
},
methods: {
validations(field) {
return { required: true, fieldName: field }
}
}
推荐阅读
- javascript - 如何在动态键内的firebase实时数据库中直接更新值
- typescript - 类型脚本中的 => this[var] 是什么
- python - Python 脚本在 IDE 中运行,但不在终端 (Kafka) 中
- aframe - WebVR中用户进入VR时如何添加2D叠加退出按钮?
- android - failed to make and chown /acct/uid_10059: Read-only file system & other errors on Android app
- security - iframe 父级是否有权访问基于 cookie 的子级身份验证令牌?
- powershell - 多个输入到新提示和 Powershell -run as 和 -nonewwindow 问题
- spring-boot - 服务器无法通过启用多播加入 hazelcast 集群?
- python - 什么是“默认 Python 安装”?
- passport.js - LocalAuthGuard 在带有 typeorm 和 passport-local 的 Nestjs 应用程序中不起作用