vee-validate 3 的有效格式是啥？
Posted
技术标签:
【中文标题】vee-validate 3 的有效格式是啥？【英文标题】：Which is valid format for vee-validate 3?vee-validate 3 的有效格式是什么？ 【发布时间】：2020-03-19 07:15:38 【问题描述】：在@vue/cli 4.0.5 应用程序中，我安装了 "vee-validate": "^3.0.11" 并遇到问题，因为试图设置 common 电子邮件字段的验证规则：
<validation-provider rules="required|email" v-slot=" errors ">
<input
type='email'
v-model="form.email"
name="email"
id="email"
class="form-control editable_field" placeholder="Email Address"
>
<span> errors[0] </span>
</validation-provider>
...
<script>
import ValidationProvider, extend from 'vee-validate'
import required, email from 'vee-validate'
extend('required', value => !!value);
extend('email', value => !!value);
验证根本没有，没有错误信息或控制台错误...
怎么了？
修改#2：
查看文档和实时示例 https://codesandbox.io/s/jdqzk 我尝试使用验证和 出现错误：
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: handleSubmit is not a function"
发现于 ---> 在 src/views/auth/Login.vue
我的 src/views/auth/Login.vue ：
<template>
<div class="page_content_container">
<div class="page_content_content col-xs-12 col-sm-10 col-md-6 mx-auto">
<ValidationObserver v-slot=" handleSubmit ">
<form class="login" v-on:submit.prevent="handleSubmit(authenticate)">
<div class="card">
<div class="card-body card-block">
<div class="block_2columns_md m-3"> <!-- email -->
<div class="key_values_rows_label_13 m-0 p-0">
<label class="col-form-label" for="email">Email:</label>
</div>
<div class="key_values_rows_value_13 m-0 p-0">
<div class="col-12">
<div class="input-group">
<div class="input-group-addon">
<i :class="'i_link '+getHeaderIcon('email')"></i>
</div>
<ValidationProvider
rules="required"
immediate
v-slot=" errors "
>
<input
v-model="form.email"
name="email"
id="email"
class="form-control editable_field" placeholder="Email Address"
>
</ValidationProvider>
</div>
</div>
</div>
</div> <!-- <div class="block_2columns_md m-0"> email -->
<div class="block_2columns_md m-3"> <!-- password -->
<div class="key_values_rows_label_13 m-0 p-0">
<label class="col-form-label" for="password">Password:</label>
</div>
<div class="key_values_rows_value_13 m-0 p-0">
<div class="col-12">
<div class="input-group">
<div class="input-group-addon">
<i :class="'i_link '+getHeaderIcon('password')"></i>
</div>
<input type="password" v-model="form.password" id="password" name="password" class="form-control editable_field"
placeholder="Password"
>
</div>
</div>
</div>
</div> <!-- <div class="block_2columns_md m-0"> password -->
</div> <!-- <div class="card-body card-block"> -->
<div class="card-footer m-0 p-0">
<div class="form-row m-1" style="justify-content: flex-end;">
<button type="reset" class="btn btn-danger btn-sm m-2">
<i :class="'i_link '+getHeaderIcon('cancel')"></i>Home
</button>
<button type="submit" class="btn btn-success btn-sm m-2 ml-4 mr-4">
<i :class="'i_link '+getHeaderIcon('save')"></i>Submit
</button>
</div>
</div>
</div> <!-- <div class="card"> -->
</form>
</ValidationObserver>
</div> <!-- page_content_content -->
</div> <!-- page_content_container -->
</template>
<script>
import bus from '../../../src/main'
import appMixin from '@/appMixin'
import ValidationObserver, ValidationProvider, localize, extend from 'vee-validate'
import en from 'vee-validate/dist/locale/en.json';
import * as rules from 'vee-validate/dist/rules';
localize('en', en);
extend('required',
validate(value)
return
required: true,
valid: ['', null, undefined].indexOf(value) === -1
;
,
computesRequired: true
);
export default
name: 'loginPage',
components:
ValidationObserver, ValidationProvider
,
data()
return
form:
email: '',
password: ''
,
error: null,
site_name: process.env.VUE_APP_SITE_NAME
,
mixins: [appMixin],
methods:
authenticate()
alert('authenticate::' + (-3))
console.log('authenticate this.form::')
console.log(this.form)
this.$store.dispatch('login', this.form)
.then(() => this.$router.push('/'))
.catch(err => console.log(err))
, // methods:
computed:
authError()
return this.$store.getters.authError
// computed:
</script>
我希望 handleSubmit 是在 vee-validate 库中定义的... 在示例中，我没有看到它是附加导入的。 我试图创建自己的 handleSubmit 方法，但还是出错了......
如何解决？
修改#3：
我现在搬到了 3.1 和我的 /package.json ：
"name": "ctasks",
"version": "0.1.0",
"private": true,
"scripts":
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
,
"dependencies":
"axios": "^0.19.0",
"core-js": "^3.3.2",
"font-awesome": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"vee-validate": "^3.1.0",
"vue": "^2.6.10",
"vue-focus": "^2.1.0",
"vue-js-modal": "^1.3.31",
"vue-notification": "^1.3.20",
"vue-router": "^3.1.3",
"vue-select": "^3.2.0",
"vue2-filters": "^0.8.0",
"vuex": "^3.0.1"
,
"devDependencies":
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-router": "^4.0.0",
"@vue/cli-plugin-vuex": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"node-sass": "^4.12.0",
"popper.js": "^1.16.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
和
run npm install
我根据https://codesandbox.io/s/rsmwq 示例重新制作了我的页面，其中 loginData 定义为表单数据变量：
<template>
<div class="page_content_container">
<div class="page_content_content col-xs-12 col-sm-10 col-md-6 mx-auto">
<ValidationObserver ref="form">
<form class="login" @submit.prevent="handleSubmit(onSubmit)">
<div class="card">
<div class="card-body card-block">
<div class="block_2columns_md m-3"> <!-- email -->
<div class="key_values_rows_label_13 m-0 p-0">
<label class="col-form-label" for="email">Email:</label>
</div>
<div class="key_values_rows_value_13 m-0 p-0">
<div class="col-12">
<div class="input-group">
<div class="input-group-addon">
<i :class="'i_link '+getHeaderIcon('email')"></i>
</div>
<ValidationProvider
rules="required"
immediate
v-slot=" errors "
>
<input
v-model="loginData.email"
name="email"
id="email"
class="form-control editable_field" placeholder="Email Address"
>
</ValidationProvider>
</div>
</div>
</div>
</div> <!-- <div class="block_2columns_md m-0"> email -->
<div class="block_2columns_md m-3"> <!-- password -->
<div class="key_values_rows_label_13 m-0 p-0">
<label class="col-form-label" for="password">Password:</label>
</div>
<div class="key_values_rows_value_13 m-0 p-0">
<div class="col-12">
<div class="input-group">
<div class="input-group-addon">
<i :class="'i_link '+getHeaderIcon('password')"></i>
</div>
<input type="password" v-model="loginData.password" id="password" name="password" class="form-control editable_field"
placeholder="Password"
>
</div>
</div>
</div>
</div> <!-- <div class="block_2columns_md m-0"> password -->
</div> <!-- <div class="card-body card-block"> -->
<div class="card-footer m-0 p-0">
<div class="form-row m-1" style="justify-content: flex-end;">
<button type="reset" class="btn btn-danger btn-sm m-2">
<i :class="'i_link '+getHeaderIcon('cancel')"></i>Home
</button>
<button type="submit" class="btn btn-success btn-sm m-2 ml-4 mr-4">
<i :class="'i_link '+getHeaderIcon('save')"></i>Submit
</button>
</div>
</div>
</div> <!-- <div class="card"> -->
</form>
</ValidationObserver>
</div> <!-- page_content_content -->
</div> <!-- page_content_container -->
</template>
<script>
import bus from '../../../src/main'
import appMixin from '@/appMixin'
import ValidationObserver, ValidationProvider, localize, extend from 'vee-validate'
import en from 'vee-validate/dist/locale/en.json';
import * as rules from 'vee-validate/dist/rules';
localize('en', en);
extend('required',
validate(value)
return
required: true,
valid: ['', null, undefined].indexOf(value) === -1
;
,
computesRequired: true
);
export default
name: 'loginPage',
components:
ValidationObserver, ValidationProvider
,
data()
return
loginData:
email: '',
password: ''
,
error: null,
site_name: process.env.VUE_APP_SITE_NAME
,
mixins: [appMixin],
methods:
onSubmit()
this.$refs.form.validate().then(success =>
if (!success)
return;
alert('Form has been submitted!');
this.firstName = this.lastName = this.email = '';
this.$nextTick(() =>
this.$refs.form.reset();
);
);
// onSubmit
, // methods:
computed:
authError()
return this.$store.getters.authError
// computed:
</script>
但是点击提交按钮我还是报错：
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "handleSubmit" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
我看不出我的代码有什么问题？
谢谢！
【问题讨论】：
【参考方案1】：您应该阅读有关必填字段的指南，引用自文档：
vee-validate 不会验证为空的可选字段。这是有道理的，如果用户没有在可选字段中输入任何值，则它是有效的。在他们输入非空值之前，不会运行规则。
见Required fields。
【讨论】：
谢谢，我读到了：它与 v2 非常不同。我创建了规则和字段定义，但是有任何方法，例如： this.$validator.validateAll().then((result) => ，我用来检查所有规则并在成功的情况下提交数据？ 请看修改#2： 确保您使用的是 vee-validate3.1 这在此处记录：logaretm.github.io/vee-validate/guide/…
将 v-slot="handleSubmit" 添加到您的 ValidationObserver ... 错误对我来说似乎很清楚？
我不知道如何使用它。你能举个例子吗？【参考方案2】：
感谢@Ryley！ 我将我的表格重新制作为：
<ValidationObserver ref="form" v-slot="handleSubmit">
...
<ValidationProvider
name="Password"
rules="required"
v-slot=" errors "
>
<div class="input-group">
<div class="input-group-addon">
<i :class="'i_link '+getHeaderIcon('users')"></i>
</div>
<input
type='text'
v-model="form.name"
name="name"
id="name"
class="form-control editable_field" placeholder="Username"
>
</div>
<div class="validation_error"> errors[0] </div>
</ValidationProvider>
验证工作正常！
【讨论】：
以上是关于vee-validate 3 的有效格式是啥？的主要内容，如果未能解决你的问题，请参考以下文章
使用 Vee-Validate 和 vue js 2 在提交时验证子输入组件