使用 vue.js 和 vuetify 进行服务器端表单验证 [英] Server side form validation with vue.js and vuetify
问题描述
我看到很多关于使用 Vuetify 进行客户端验证的文档，但发现很难找到有关 vuetify 和 vue 的服务器端验证消息的文档.
问题
我有这个组件:
<v-容器><v-布局行><v-flex xs12 sm6 offset-sm3><v-card><v-card-text><v-容器><h3>立即注册</h3><form v-on:submit.prevent="onSubmit"><v-布局行><v-flex xs12><v-文本字段名称=电子邮件"标签=电子邮件"类型=电子邮件"参考 =用户电子邮件"id="电子邮件"></v-text-field></v-flex></v-layout><v-布局行><v-flex xs12><v-文本字段名称=密码"标签=密码"类型=密码"参考 =用户密码"id="密码"></v-text-field></v-flex></v-layout><v-布局行><v-flex xs12><v-btn type="submit">注册</v-btn></v-flex></v-layout></表单></v-容器></v-card-text></v-card></v-flex></v-layout></v-容器></模板><脚本>从 'axios' 导入 axios从vue-router"导入路由器导出默认{数据() {返回 {错误:[]，}},方法: {onSubmit: 函数 () {axios.post('/用户', {用户:{电子邮件:this.$refs.user_email.value，密码:this.$refs.user_password.value}}).then(响应 => {}).catch(错误=> {this.errors.push(error.response.data.errors);})}}}它基本上收集从服务器返回的错误.这些是我想在出现问题时显示的错误消息.
示例:
如果电子邮件为空白，这将使用 errors 数组捕获email_is_blank"消息.但是我怎样才能使用 Vue.js 和 Vuetify 获取该消息并以表单显示它?
其中一种方法是使用值和错误字符串创建对象:
数据:() =>({电子邮件: {价值: ''，错误: ''}})然后将您的模型绑定到对象 value，并将 error-messages 属性绑定到对象 error:
在您的回复中，只需更改 error 的值:
<代码>....then(响应 => {this.email.error = response.errors.email//或者从服务器到相关错误消息的任何路径})I'm seeing lots of documentation for client-side validation with Vuetify, but finding it very difficult to find docs for server side validation messages for vuetify and vue.
PROBLEM
I have this component:
<template>
<v-container>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-card-text>
<v-container>
<h3>Register Now</h3>
<form v-on:submit.prevent="onSubmit">
<v-layout row>
<v-flex xs12>
<v-text-field
name="email"
label="Email"
type="email"
ref="user_email"
id="email">
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-text-field
name="password"
label="Password"
type="password"
ref="user_password"
id="password">
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-btn type="submit">Sign Up</v-btn>
</v-flex>
</v-layout>
</form>
</v-container>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import axios from 'axios'
import router from 'vue-router'
export default {
data() {
return {
errors: [],
}
},
methods: {
onSubmit: function () {
axios.post('/users', {
user: {
email: this.$refs.user_email.value,
password: this.$refs.user_password.value
}
})
.then(response => {
})
.catch(error => {
this.errors.push(error.response.data.errors);
})
}
}
}
</script>
It basically collects errors that come back from the server. Those are the error messages I want to show if something goes wrong.
EXAMPLE:
If the email is blank, this will capture the "email_is_blank" message with the errors array. But how can I take that message and display it in the form using Vue.js and Vuetify?
One of the ways would be to create object with value and error string:
data: () => ({
email: {
value: '',
error: ''
}
})
Then bind your model to object value, and error-messages prop to object error:
<v-text-field
v-model="email.value"
label="email"
:error-messages="email.error"
></v-text-field>
In your response just change the value of error:
...
.then(response => {
this.email.error = response.errors.email // or whatever the path is to the relevant error message from the server
})
这篇关于使用 vue.js 和 vuetify 进行服务器端表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
