Question

你好！我正在使用react-form-validator进行输入验证。（现在，我需要验证所有输入数字是否都不同）

我该怎么做？在handleInput方法中，我将输入值添加到数组中，并在新的验证规则ValidatorForm.addValidationRule中检查数组是否包含用户刚刚输入的数字。

问题是用户输入的数字正在ValidatorForm.addValidationRule调用之前添加到数组中-因此即使该数字仅添加一次（因为它已经在数组中），验证程序也会显示错误。 / p>

这是它的样子：

我的代码：

const ValueArray = [];
let inputArr = ["user_number_1", "user_number_2", "user_number_3", "user_number_4", "user_number_5", "user_number_6"];

ValidatorForm.addValidationRule('isInputNotEqual', (value) => {

  if (ValueArray.includes(value)) {
      return false;
  }
  return true;
});

export default class InputArea extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      draw_number: '',
      user_number_1: '',
      user_number_2: '',
      user_number_3: '',
      user_number_4: '',
      user_number_5: '',
      user_number_6: '',
    }


  }


  submitHandler = () => {
    let { draw_number, ...rest } = this.state;
    let request = {
      numbers: Object.keys(rest).map(key => parseInt(rest[key])),
      draws: parseInt(draw_number)
    };
    this.props.onSubmit(request);
  }

  inputHandler = event => {
    let indexField = inputArr.indexOf(event.target.name);
    this.setState({[event.target.name]: event.target.value});
    ValueArray.splice(indexField, 1, event.target.value);
  };

  render() {
    console.log(ValueArray)
      return (
        <ValidatorForm ref="form" onSubmit={this.submitHandler} className="validator-form">
          <InputWrapper>

            {Object.entries(this.state).map(([key, value]) => {
              if (key.includes("user_number")) {
                return (
                  <NumberWrapper key={key}>
                    <Label>Number {key.replace(/\D*/, '')}</Label>
                    <TextValidator
                      name={key} 
                      type="number" 
                      maxLength="2" 
                      value={value} 
                      onChange={this.inputHandler} 
                      validators={['required', 'minNumber:1', 'maxNumber:52', 'isInputNotEqual']}
                      errorMessages={['This field is required', 'The number can not be negative or null', 'Please, write numbers from 1 to 52 only', 'All lottery numbers should be different']} 
                    />
                    <span className="focus-border">
                        <i></i>
                    </span>
                  </NumberWrapper>
                )
              }
            })}
            <NumberWrapper>
              <Label>Number of draws:</Label>
              <TextValidator 
                name="draw_number" 
                type="number" 
                value={this.state.draw_number} 
                onChange={this.inputHandler} 
                className="draw-number" 
                validators={['required', 'minNumber:1', 'maxNumber:99999', 'isInputNotEqual']}
                errorMessages={['This field is required', 'Number of draws can not be negative or null', 'You can play not more than 99.999 draws', 'test']}
              />
              <span className="focus-border">
                <i></i>
              </span>
            </NumberWrapper>

          </InputWrapper>
          <Button type="submit">Let's win!</Button>
        </ValidatorForm>
      )
  }
}

要解决此问题，我需要重写什么（验证规则或inputHandler）？

更新：

我将ValidatoeForm规则重写为以下变体：

ValidatorForm.addValidationRule('isInputNotEqual', (value) => {
  ValueArray.sort();
  console.log(ValueArray);
  for (let i = 0; i < ValueArray.length; i++) {
    if (ValueArray[i] === ValueArray[i + 1]) {
      return false;
    }
  }
  return true;
});

但是现在，ValueArray仅记录输入中的第一个数字（例如：如果我输入14，它将在内部存储1）。

我认为问题出在我的拼接方法中：ValueArray.splice(indexField, 1, event.target.value);

我添加了一个console.log以查看哪些值包含ValueArray：

验证问题：无法验证输入字段内部是否包含相同的元素

0 个答案: