在redux-form中,可以通过使用"validate"函数来为字段设置"min"和"max"值。validate函数是一个验证器函数,用于验证表单字段的值。在validate函数中,可以通过访问字段的值来进行验证,并返回一个包含错误信息的对象。
下面是一个示例代码,演示如何为redux-form中的字段设置"min"和"max"值:
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const validate = values => {
const errors = {};
if (values.age < 18) {
errors.age = '年龄不能小于18岁';
}
if (values.age > 60) {
errors.age = '年龄不能大于60岁';
}
return errors;
};
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<label>{label}</label>
<div>
<input {...input} type={type} />
{touched && error && <span>{error}</span>}
</div>
</div>
);
const MyForm = props => {
const { handleSubmit } = props;
return (
<form onSubmit={handleSubmit}>
<Field
name="age"
component={renderField}
type="number"
label="年龄"
/>
<button type="submit">提交</button>
</form>
);
};
export default reduxForm({
form: 'myForm',
validate
})(MyForm);
在上面的示例中,我们定义了一个validate函数来验证年龄字段的值。如果年龄小于18岁,或者大于60岁,将会返回一个包含错误信息的对象。在renderField函数中,我们使用了redux-form提供的Field组件来渲染表单字段,并通过传递validate函数来进行验证。
这是一个简单的示例,你可以根据自己的需求来扩展和修改validate函数,以实现更复杂的验证逻辑。
关于redux-form的更多信息和使用方法,你可以参考腾讯云的相关产品文档:redux-form。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云