使用 Quasar (Vue) 进行服务器端输入验证

Question

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

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

我目前正在使用此逻辑，但我无法将其移至混入，因为我需要访问错误字段。完整示例可在此处获得 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
  }
}

Answer 1

我找到了新的 vue3 组合的解决方案-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,
      setValidationErrors,
      getValidationErrors,
      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,
    setValidationErrors,
    getValidationErrors,
    hasValidationErrors
  }
}

使用 Quasar (Vue) 进行服务器端输入验证

Server-side input validation with Quasar (Vue)

vue.js

validation

asp.net-core

quasar-framework

quasar