时间戳

首页 > 解决方案 > 使用 user.name 等字段名称时出现 Redux 表单验证错误

reactjs - 使用 user.name 等字段名称时出现 Redux 表单验证错误

问题描述

我有一个带有 redux 形式的反应组件，如下所示

<div className="col-sm-12">
 <div className="form-group row">
  <div className="col-sm-4">
   <label>A. Name</label>
  </div>
  <div className="col-sm-8">
  <ul className="sub-qn-ans-list d-flex list-unstyled">
    <li>
      <Field
      name="first_name"
      component={renderField}
      type="text"
      placeholder="First name"
      className="form-control" />
    </li>
    <li>
      <Field
      name="last_name"
      component={renderField}
      placeholder="Last name"
      type="text"
      className="form-control" />
    </li>
  </ul>
</div>
</div>
<div className="form-group row">
<div className="col-sm-4">
  <label>B. Residential Address</label>
</div>
<div className="col-sm-8">
  <ul className="sub-qn-ans-list d-flex list-unstyled">
    <li>
      <Field
        name="residential.street"
        component={renderField}
        placeholder="Street"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.area"
        component={renderField}
        placeholder="Area"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.city"
        component={renderField}
        placeholder="City"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.district"
        component={renderField}
        placeholder="District"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.landline"
        component={renderField}
        placeholder="Landline"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.mobile"
        component={renderField}
        placeholder="Mobile"
        type="text"
        className="form-control" />
    </li>
  </ul>
</div>
</div>
</div>

我正在尝试对输入字段应用验证。字段的验证first_name和last_name工作正常。但是当我尝试对residential.street.

下面是我的验证代码。

const LocatorValidation = (values, form) => {
const errors = {};
if (!values.first_name) {
  errors.first_name = 'Required';
} else if (!/[A-Za-z.]+/.test(values.first_name)) {
  errors.first_name = 'First name must have only alphabets';
}
if (!values.last_name) {
  errors.last_name = 'Required';
} else if (!/^[A-Za-z.]+$/.test(values.last_name)) {
  errors.last_name = 'First name must have only alphabets';
}
if (!values.residential) {
  errors.residential.street = 'Required';
}
return errors;
}

export default LocatorValidation;

这是显示错误的图像。 在此处输入图像描述

标签： reactjsvalidationreduxredux-form

解决方案

由于属性中errors.residential.street的错误状态未定义。所以你需要先将它设置为空对象residentialerrors

errors.residential = {}
errors.residential.street = "Required"

我也会改进检查

!values.residential || !values.residential.street

推荐阅读