Question

我很困惑如何在表单字段是动态的时候进行验证，比如我想要在每个字段上进行必要的电子邮件验证，但是获取{0-name：''，0-email：''}等字段。 ..那么如何验证？我是否需要为每个字段添加验证？

class Dash extends Component {
ListData = () => {
    let a = [];
    for (var i = 0; i < 5; i++) {
        a.push(<ListItemView value={i} key={i} />);
    }
    return a;
};
render() {
    return (
        <div className="col-lg-12 col-sm-12 col-12 r-p0">
            <CardContent className="pb-3 r-p0" elevation={4}>
                    <form onSubmit={this.props.handleClick}>
                        <List>{this.ListData()}</List>
                    </form>
                </CardBox>
            </CardContent>
        </div>
    );
}
}

const ListItemView = ({ value }) => {
return (
    <ListItem className="invitememberlist">
        {console.log(value, 'key')}
        <div className="col-12 w-100">
            <div className="row">
                <div className="col-lg-4 col-sm-5 col-12">
                    <Field
                        name={`${value}-name`}
                        component={renderTextField}
                        label="Name"
                        className="mt-1"
                        fullWidth
                        margin="normal"
                    />
                </div>
                <div className="col-lg-5 col-sm-5 col-12">
                    <Field
                        name={`${value}-email`}
                        component={renderTextField}
                        label="Email"
                        className="mt-1"
                        fullWidth
                        margin="normal"
                        type="email"
                    />
                </div>
            </div>
        </div>
    </ListItem>
);
};

validate.js

 export const isvalidinvitemember = (values) => {
   const errors = {};

     console.log(values);

return errors;
};

Answer 1

Redux Form有一个验证道具，如果你想验证每个领域，你可以使用该道具。

例如：

<Field
 name="username"
 type="text"
 component={renderField}
 label="Username"
 validate={required}
/>

参考here

使用动态字段ID进行redux表单验证

1 个答案: