Redux 表单动态字段级别验证答案

【问题标题】：Redux Form Dynamic Field Level ValidationRedux 表单动态字段级别验证
【发布时间】：2017-12-09 16:54:22
【问题描述】：

我有一个动态表单字段，该字段是基于表单选定字段的值所必需的。即如果某个字段的值为“是”，则注释框是必需的，如果是“否”，则不需要。

如果我最初选择“是”并触摸并模糊评论字段，验证将返回所需的错误。但是，如果我切换到“否”并返回“是”，验证错误将不再发生。如果我在评论框中输入并删除验证将再次发生。

我正在使用字段级验证，并且也使用同步验证来解决相同的问题。

<Field name={`${fieldId}.comment`}  validate={condition.required ? [required] : []} label={condition.label} className="form-control" component={renderTextField} />

where 条件是检查是否需要该字段。

逻辑是正确的，因为初始选择的验证工作，如果您填写评论字段并删除文本，但它似乎没有收到验证错误。

提前致谢

【问题讨论】：

标签： reactjs redux-form

【解决方案1】：

引用the Redux-Form Field component docs (v 6.8.0):

validate : (value, allValues, props) => 错误 [可选]

允许您提供字段级验证规则。功能将给出该字段的当前值，所有其他形式值，以及传递给表单的任何道具。如果该字段有效，则应该返回未定义，如果该字段无效，它应该返回一个错误（通常但不一定是字符串）。

您试图将错误值直接传递给Field，但validate 属性旨在接受用于确定有效性的验证函数。你应该这样做：

const validateComment = (value, allValues, props) => {
  // naturally you do something else here if the value
  // used to determine whether this field is required or
  // not is not managed by the same redux form
  const isRequired = allValues.commentRequired === 'Yes'

  if (isRequired && !value) return "Can't be empty."
}

<Field
  name={`${fieldId}.comment`}
  validate={ validateComment }
  label={condition.label}
  className="form-control"
  component={renderTextField}
/>

希望这会有所帮助！

【讨论】：

【解决方案2】：

它对我来说很好用。 allValues 是成功的关键。在我的情况下，我需要验证是否存在电话或手机，如果其中一个存在则不验证，但如果两者都是空的，则验证两者。

    validatePhone = (value: any, allValues: any) => {
      const isRequired = allValues.contactCell === undefined
      if (isRequired && !value) 
        return 'Phone is required';
    }

    validateCell = (value: any, allValues: any) => {
      const isRequired = allValues.contactPhone === undefined
      if (isRequired && !value) 
        return 'Cell is required';
    }

    <Field id="contactPhone" name="contactPhone" label="Phone" className="TextField" 
                 validate = {this.validatePhone} component={RenderTextField}/>
    <Field id="contactCell" name="contactCell" label="Cell" className="TextField" 
                 validate = {this.validateCell} component={RenderTextField}/>

【讨论】：

【解决方案3】：

另一种选择... 我尝试在另一个文件中分离这些条件：

验证.js：

export const required = value => value ? undefined : 'Campo obrigatório!'
export const maxLength = max => value =>
  value && value.length > max ? `Máximo de ${max} caracteres` : undefined
export const maxLength60 = maxLength(60)
export const number = value => value && isNaN(Number(value)) ? 'Precisa ser numérico' : undefined
export const minValue = min => value =>
  value && value.length < min ? `No mínimo ${min}` : undefined
export const minValue4 = minValue(4)
export const emailvalid = value =>
  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ?
  'Email inválido' : undefined

你也可以在你的表单中这样做：

    <Field
      name="email"
      cilIcon="cil-user"
      label="Email:"
      placeholder="Digite seu email"
      component={InputWithLabel}          
      type="text"          
      validate={ 1 === 2 ? [required, emailvalid, maxLength60] : []}
    />
    <Field
      name="password"
      cilIcon="cil-lock-locked"
      label="Senha:"
      placeholder="Digite sua senha"
      component={InputWithLabel}
      type="password"
      validate={[required, maxLength60, minValue4]}
    />

【讨论】：