redux 表单服务器端验证 [英] redux form server side validation

问题描述

我一直在设置 redux 表单的服务器端验证.我有一个注册表单并且完美地执行了客户端验证，但是在服务器端验证中，我无法理解如何使用相应的输入字段显示来自服务器的错误消息.

I am stuck in setting the server-side validation of the redux form. I have a registration form and performing a client-side validation perfectly, but while in server-side validation I am unable to understand how to display the error message from the server with a respective input field.

API 请求

 const createMemberRegistration = user => {
  return dispatch => {
  dispatch({ type: POST_REQUEST });
   processMemberRegistration(user)
   .then(user => {
    dispatch({ type: REGISTRATION_SUCCESS });
    dispatch(reset('memberregistration'));
  })
  .catch(err => {
    dispatch({ type: REGISTRATION_ERROR,payload:err });
  });
  };
 };

组件

 // submit button
 submitSignup(values) {
  var registerfields = JSON.stringify({
   first_name: values.firstname.trim(),
   last_name: values.lastname.trim(),
   email: values.email.trim(),
   password: values.password.trim()
 });
 if (registerfields) {
  this.props.createMemberRegistration(registerfields);
 }
}

//binding with redux form
const reduxmemberregistration = reduxForm({
 form: "memberregistration",
 validate:isvalidMemberRegistration,
 asyncValidate,
 enableReinitialize: true
})(MemberRegistration);

异步函数

卡在这里要做什么以及如何使用相应的字段进行验证

stuck here what to do and how to validate with respective field

 const asyncValidate = (values, dispatch, props) => {
  return new Promise((resolve, reject) => {
   if(values.email){ // i get the value from the form,so what to do here?
    // so should i need to send request all the time to server for each 
      field for validation or what?
  }
 }
});
};

推荐答案

假设您有一个表示表单状态的对象，并且您有一些 error 属性与上的字段具有相同的属性你的表格.

Let's say you have a object that represents the state of you form and there you have some error property with same properties as fields on your form.

假设它看起来像这样

formState: {name : 'Test', error: {name: null} }

并且您在输入下呈现一些错误消息或使用基于此 formState.error.name 的某些类装饰无效输入字段.

And you are rendering some error message under your inputs or decorating invalid input field with some class based on this formState.error.name.

在这种情况下，您可能会从服务器获取响应对象，该对象还包含一些输入特定信息并将其存储在例如formState.serverError 错误.因此，一旦从后端获取数据，您就会将带有此验证的操作发布到 Redux 存储，如果有错误，您将填充相应的错误并显示相应的错误消息.

In this situation you may get response object from server that also bears some input specific information and store it in e.g. formState.serverError error. So once data is fetched from backend you will post an action with this validation to Redux store, and if there are some errors, you will populate corresponding errors and will show appropriate error messages.

输入字段有效性的条件现在看起来像 formState.error.name &&formState.serverError.name

Condition for input field validity now will look like formState.error.name && formState.serverError.name

这篇关于redux 表单服务器端验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！