如何使用 Redux-Form 進行客戶端和服務器端驗證

Question

我有一個奇怪的要求。 我需要在客戶端和服務器端做一個 redux-form 驗證。 我能夠在客戶端執行此操作，但不確定如何為客戶端和服務器端執行此操作。 檢查 redux-form 文檔，它在客戶端或服務器上完成，但不是同時為兩者完成。

這是代碼

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const validate = values => {
  const errors = {}
  if (!values.username) {
    errors.username = 'Required'
  } else if (values.username.length > 15) {
    errors.username = 'Must be 15 characters or less'
  }
  if (!values.email) {
    errors.email = 'Required'
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid email address'
  }
  if (!values.age) {
    errors.age = 'Required'
  } else if (isNaN(Number(values.age))) {
    errors.age = 'Must be a number'
  } else if (Number(values.age) < 18) {
    errors.age = 'Sorry, you must be at least 18 years old'
  }
  return errors
}

const renderField = ({
  input,
  label,
  type,
  meta: { touched, error, warning }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched &&
        ((error && <span>{error}</span>) ||
          (warning && <span>{warning}</span>))}
    </div>
  </div>
)

const SyncValidationForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
      />
      <Field name="email" type="email" component={renderField} label="Email" />
      <Field name="age" type="number" component={renderField} label="Age" />
      <div>
        <button type="submit" disabled={submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'syncValidation',
  validate
})(SyncValidationForm)

現在 onSubmit 我必須做一個 API 請求並顯示來自服務器的每個字段的錯誤。 誰能解釋我如何在保持客戶端驗證正常工作的同時添加服務器端驗證？

提前致謝。

Answer 1

好吧，您需要為此編寫服務器端代碼。 這取決於你想使用什么語言，但我想node.js很好地實現了這一點。 因此，為了驗證服務器上的數據，您應該創建一個 nodejs 服務器，並傳遞您的數據（已在客戶端驗證過），然后在node.js服務器中再次驗證數據。 所以總而言之，你應該啟動node.js ，這很簡單，因為 react/node.js 幾乎是一樣的。 希望對你有幫助

Answer 2

Redux-form 有一個函數，您可以使用它在 onSubmit 函數中拋出 submitErrors。 https://redux-form.com/8.2.2/docs/api/submissionerror.md/這可以在異步調用后完成。