redux 表单 - 验证输入匹配特定长度

Question

我正在使用 Redux Form 并创建验证以检查该字段是否完全匹配 X 个字符。我的方法是确定输入的长度并根据指定长度进行验证。我能够成功地通过控制台记录每个字符输入，但在尝试记录输入长度时收到错误消息。

如何确定 validator.js 文件中输入的长度

错误信息："TypeError: Cannot read property 'length' of undefined"

//component.js (Redux Form)
import React from 'react';
import {reduxForm, Field, SubmissionError, focus} from 'redux-form';
import Input from './input';
import {exactSix} from '../validators';

export class Contact extends React.Component {
  // onSubmit(values) {}

  render() {
      return (
          <form
            onSubmit={this.props.handleSubmit(values =>
              this.onSubmit(values)
          )}>
            <Field 
                name="content"
                type="text"
                component={Input}
                label="Match"
                validate={[exactSix]}
            />
            <button
                type="submit"
                disabled={this.props.pristine || this.props.submitting}>
                Send message
            </button>
          </form>
      );
    }
  }

export default reduxForm({
    form: 'contact',
    onSubmitFail: (errors, dispatch) =>
        dispatch(focus('contact', Object.keys(errors)[0]))
})(Contact);



//validator.js
export const exactSix = value => {
  console.log(value);
  console.log(values.length); //this line is highlighted within the error message
  if(value.length === 6){
    return undefined;
  } else {
    return 'must be exactly six';
  }
}

Answer 1

您需要检查 value 是否未定义：

export const exactSix = value => {
    return value && value.length !== length
        ? `must be exactly six`
        : undefined;
};

Codesandbox demo

redux 表单 - 验证输入匹配特定长度

redux form - validate input matches specific length

validation

redux-form