在反应组件中添加多个验证

Question

我正在使用一个教程反应组件，其中验证是在组件中烘焙的。我遇到了问题，我只能进行一种类型的验证，但我想进行多次验证。

我的组件的渲染是

    <Input
          hintText={this.props.hinttext}
          placeholder={this.props.placeholder}
          value={this.state.value}
          onChange={this.onChange}
        />

onChange方法是这样的

  onChange = (evt) => {
    const name= this.props.name;
    const value = evt.target.value;
    const error = this.props.validate ? this.props.validate(value) : false;
    this.setState({value, error});
    this.props.onChange({name, value, error});
  }

现在我通过以下方法在我的表单中使用它

          <Field
            placeholder="Email"
            name='email'
            value={this.state.fields.email}
            onChange={this.onInputChange}
            validate={(val) => (isEmail(val) ? false: 'Invalid Email')}
          />

这将验证电子邮件，如果我需要其他类型的验证，我可以像下面这样更改验证

            validate={(val) => (val ? false : 'Name Required')}

一切正常，但我想为一个字段定义两个验证，我注意到它是箭头函数，我应该添加多个值但不确定如何去做，因为我不擅长 ES6。任何建议。

Answer 1

您可以尝试运行自定义验证器，其中包含您需要的验证，如下所示

function validator(val) {
  this.error = [];
  this.val = val;
  this.isRequired = function(){
    if (!this.val) {
      this.error.push('This field is required');
    }
    return this;
  }
  this.isEmail = function() {
   const filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   if (this.val && !filter.test(this.val)) {
      this.error.push('Invalid Email');
   }
   return this;
  }
  return this;
}

并在验证属性中调用验证器

<Field
    placeholder="Email"
    name='email'
    value={this.state.fields.email}
    onChange={this.onInputChange}
    validate={(val) => new validator(val).isRequired().isEmail().error}
/>

在反应组件中添加多个验证

Adding multiple validation in react component

ecmascript-6

reactjs

react-component