使用 vue.js 和 vuetify 进行服务器端表单验证

Posted 2023-02-23

【中文标题】使用 vue.js 和 vuetify 进行服务器端表单验证

【英文标题】：Server side form validation with vue.js and vuetify

【发布时间】：2018-07-14 18:46:27

【问题描述】：

我看到很多关于使用 Vuetify 进行客户端验证的文档，但发现很难找到关于 vuetify 和 vue 的服务器端验证消息的文档。

问题

我有这个组件：

<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>

它主要收集从服务器返回的错误。这些是我想在出现问题时显示的错误消息。

示例：

如果电子邮件为空白，这将捕获带有errors 数组的“email_is_blank”消息。但是如何使用 Vue.js 和 Vuetify 获取该消息并在表单中显示它？

【问题讨论】：

考虑根据收到的错误对每个失败的输入应用一个类（例如invalid-input），并包含该类的 CSS 以帮助指示输入无效（例如红色边框）。您也可以考虑以编程方式强制输入本身进入无效状态，但我似乎记得这是 hacky 并且可能不可靠。 class + CSS 选项是最确定的解决方案。

【参考方案1】：

Codepen example

其中一种方法是使用值和错误字符串创建对象：

data: () => (
  email: 
    value: '',
    error: ''
  
)

然后将你的模型绑定到对象value，并将error-messages prop绑定到对象error：

<v-text-field
  v-model="email.value"
  label="email"
  :error-messages="email.error"
></v-text-field>

在您的回复中，只需更改 error 的值：

...
.then(response => 
  this.email.error = response.errors.email // or whatever the path is to the relevant error message from the server
)

【讨论】：

您必须在您的 Vue 实例中添加 vuetify: new Vuetify() 以使其适用于最新的 vuetify 版本。