使用QuasarVue进行服务器端输入验证

问题描述

我正在寻找用于Quasar Framework的服务器端输入验证的可重用解决方案。 我使用q-input字段。错误输出error和error-message可以使用2个道具。我的服务器对验证错误的响应是带有此json的400响应

{
  errors: { username: ['Username is to long.','User not valid'] },title: 'One or more validation errors occurred.',status: 400,traceId: '80000005-0000-ff00-b63f-84710c7967bb'
}

我当前正在使用此逻辑，但是由于需要访问错误字段，因此无法将其移至mixin。完整的示例在此处codesandbox.io

<q-input
  v-model="username"
  filled
  label="Username *"
  :error-message="getErrorForField('username')"
  :error="isErrorForField('username')"
/>

getErrorForField(field) {
  if (!this.errors) {
    return ''
  }
  const keys = Object.keys(this.errors)
  const key = keys.find(
    element => element.toLowerCase() === field.toLowerCase()
  )
  if (this.errors[key]) {
    return this.errors[key].join('\r\n')
  }
},isErrorForField(field) {
  if (!this.errors) {
    return false
  }
  const keys = Object.keys(this.errors)
  const key = keys.find(
    element => element.toLowerCase() === field.toLowerCase()
  )
  if (this.errors[key]) {
    return true
  }
}

解决方法

我用新的 vue3 composition-api 找到了解决方案。我现在有了一个可重用的逻辑。

MyComponent.vue

<template>
<q-input
  v-model="username"
  filled
  label="Username *"
  :error-message="getErrorForField('username')"
  :error="isErrorForField('username')"
/>
</template>

<script>
import { validationHelper } from 'src/helper/validationHelper'

export default {
  name: 'MyComponent',setup () {
    const { showValidationError,setValidationErrors,getValidationErrors,hasValidationErrors } = validationHelper()
    return {
      showValidationError,hasValidationErrors
    }
  },methods: {
    async add () {
      try {
        //axios request
      } catch (error) {
        this.setValidationErrors(error.response.data.errors)
        this.showValidationError()
      }
    }
  }
}
</script>

validationHelper.js

import { ref } from '@vue/composition-api'

export function validationHelper () {
  const errors = ref([])

  function getValidationErrorMessages (field) {
    if (!errors.value) {
      return []
    }
    const keys = Object.keys(errors.value)
    const key = keys.find(element => element.toLowerCase() === field.toLowerCase())
    if (errors.value[key]) {
      return errors.value[key]
    }
    return []
  }

  function getValidationErrors (field) {
    const errors = getValidationErrorMessages(field)
    if (errors.length !== 0) {
      return errors.join('\r\n')
    }
    return ''
  }

  function hasValidationErrors (field) {
    if (getValidationErrorMessages(field).length !== 0) {
      return true
    }
    return false
  }

  function setValidationErrors (payload) {
    errors.value = payload
  }

  function showValidationError () {
    this.$q.notify({
      type: 'negative',message: 'Validation failure',caption: 'please check the inputs'
    })
  }

  return {
    showValidationError,hasValidationErrors
  }
}