时间戳

首页 > 解决方案 > 如何使用 Redux-Form 进行客户端和服务器端验证

javascript - 如何使用 Redux-Form 进行客户端和服务器端验证

问题描述

我有一个奇怪的要求。我需要在客户端和服务器端做一个 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 请求并显示来自服务器的每个字段的错误。谁能解释我如何在保持客户端验证正常工作的同时添加服务器端验证？

提前致谢。

标签： javascriptreactjsreduxreact-reduxredux-form

解决方案

那么，您需要为此编写服务器端代码。这取决于您要使用哪种语言，但我想node.js 实现这一点很好。因此，为了验证服务器上的数据，您应该创建一个 nodejs 服务器，并传递您的数据（已经在客户端验证过的数据）然后在node.js服务器中再次验证您想要的数据。所以总而言之，你应该从node.js简单的开始，因为 react/node.js 几乎相同。希望对你有帮助

推荐阅读