React 最终形式 - 验证 return 键和值而不是字符串
React final form - Validation return key & value instead of string
目前我正在使用 React-Final-Form,我想 return 一个对象或 key/value 而不是错误字符串。
这是我的验证规则:
validate={values => {
const errors = {}
if (!values.username) {
errors.username = 'Required'
}
if (!values.password) {
errors.password = 'Required'
}
if (!values.confirm) {
errors.confirm = 'Required'
} else if (values.confirm !== values.password) {
errors.confirm = 'Must match'
}
return errors
}}
这会打印错误:
{meta.error && meta.touched && <span>{meta.error}</span>}
我不想看到 Required,而是希望能够说:key -> 'required' 并且此键的值为 'please fill in the field'。我知道可以更改 'Required' 的字符串,但我想要一个键值。我不能制作它不允许我制作的对象。
想要的结果:
{meta.error && meta.touched && {meta.error.required}}
UI 将显示:
请填写字段
这个react-final-form的游乐场可以使用,因为它几乎是一样的:
https://final-form.org/docs/react-final-form/examples/record-level-validation
嗯,你可以这样做:
<Form
onSubmit={onSubmit}
validate={values => {
const errors = {}
if (!values.username) {
errors.username = { required: true, text: "Please fill in the field"} // this is used as an object
}
if (!values.password) {
errors.password = 'Required'
}
if (!values.confirm) {
errors.confirm = 'Required'
} else if (values.confirm !== values.password) {
errors.confirm = 'Must match'
}
return errors
}}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<Field name="username">
{({ input, meta }) => {
console.log(meta) // to see the structure of your meta
return (
<div>
<label>Username</label>
<input {...input} type="text" placeholder="Username" />
{meta.error && meta.touched && <span>{meta.error.text}</span>}
// then here if you still want to use string you can put what you need
</div>
)}}
</Field>
<Field name="password">
{({ input, meta }) => (
<div>
<label>Password</label>
<input {...input} type="password" placeholder="Password" />
{meta.error && meta.touched && meta.required && <span>{meta.error}</span>}
</div>
)}
</Field>
<Field name="confirm">
{({ input, meta }) => (
<div>
<label>Confirm</label>
<input {...input} type="password" placeholder="Confirm" />
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<div className="buttons">
<button type="submit" disabled={submitting}>
Submit
</button>
<button
type="button"
onClick={form.reset}
disabled={submitting || pristine}
>
Reset
</button>
</div>
<pre>{JSON.stringify(values, 0, 2)}</pre>
</form>
)}
/>
目前我正在使用 React-Final-Form,我想 return 一个对象或 key/value 而不是错误字符串。
这是我的验证规则:
validate={values => {
const errors = {}
if (!values.username) {
errors.username = 'Required'
}
if (!values.password) {
errors.password = 'Required'
}
if (!values.confirm) {
errors.confirm = 'Required'
} else if (values.confirm !== values.password) {
errors.confirm = 'Must match'
}
return errors
}}
这会打印错误:
{meta.error && meta.touched && <span>{meta.error}</span>}
我不想看到 Required,而是希望能够说:key -> 'required' 并且此键的值为 'please fill in the field'。我知道可以更改 'Required' 的字符串,但我想要一个键值。我不能制作它不允许我制作的对象。
想要的结果: {meta.error && meta.touched && {meta.error.required}}
UI 将显示: 请填写字段
这个react-final-form的游乐场可以使用,因为它几乎是一样的:
https://final-form.org/docs/react-final-form/examples/record-level-validation
嗯,你可以这样做:
<Form
onSubmit={onSubmit}
validate={values => {
const errors = {}
if (!values.username) {
errors.username = { required: true, text: "Please fill in the field"} // this is used as an object
}
if (!values.password) {
errors.password = 'Required'
}
if (!values.confirm) {
errors.confirm = 'Required'
} else if (values.confirm !== values.password) {
errors.confirm = 'Must match'
}
return errors
}}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<Field name="username">
{({ input, meta }) => {
console.log(meta) // to see the structure of your meta
return (
<div>
<label>Username</label>
<input {...input} type="text" placeholder="Username" />
{meta.error && meta.touched && <span>{meta.error.text}</span>}
// then here if you still want to use string you can put what you need
</div>
)}}
</Field>
<Field name="password">
{({ input, meta }) => (
<div>
<label>Password</label>
<input {...input} type="password" placeholder="Password" />
{meta.error && meta.touched && meta.required && <span>{meta.error}</span>}
</div>
)}
</Field>
<Field name="confirm">
{({ input, meta }) => (
<div>
<label>Confirm</label>
<input {...input} type="password" placeholder="Confirm" />
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<div className="buttons">
<button type="submit" disabled={submitting}>
Submit
</button>
<button
type="button"
onClick={form.reset}
disabled={submitting || pristine}
>
Reset
</button>
</div>
<pre>{JSON.stringify(values, 0, 2)}</pre>
</form>
)}
/>