Vuejs2 vee validate 3的有效格式是什么？
在@vue/cli 4.0.5应用程序中，我安装了“vee validate”：“^3.0.11”，但在尝试设置公用时遇到问题 电子邮件字段的验证规则：Vuejs2 vee validate 3的有效格式是什么？,vuejs2,vee-validate,Vuejs2,Vee Validate,在@vue/cli 4.0.5应用程序中，我安装了“vee validate”：“^3.0.11”，但在尝试设置公用时遇到问题 电子邮件字段的验证规则： <validation-provider rules="required|email" v-slot="{ errors }"> <input type='email' v-model="form.email" name="email" id="email"
<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);
<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>
<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>
谢谢 您应该阅读关于必填字段的指南，从文档中引用： vee validate在可选字段为空时不验证这些字段。这是有道理的，如果用户没有在可选字段中输入任何值，那么它是有效的。在输入非空值之前，规则不会运行 请参阅。谢谢@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>
...
{{错误[0]}
验证工作正常 谢谢，我读过了：它与v2非常不同。我创建了规则和字段定义，但有如下任何方法：$validator.validateAll（）。然后（（结果）=>{，我用它检查所有规则并提交数据以防成功？请看修改的#2：确保您使用的是vee validate
3.1v-slot=“{handleSubmit}”run npm install
<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.
<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>