React，Formik，Yup:验证数组的顺序
React，Formik，Yup:验证数组的顺序
提问于 2019-12-13 13:38:10
我用React，Formik和Yup创建了一个简单的表单。它包含一个数字列表。我要验证列表的顺序是否在上升：
- 1,2,3有效
- 1,5,100人有效
- 3,1,2无效
- 100,99,98无效
我检查了是的文档，但是没有任何升序或下降的地方。这里最好的方法是什么？
import React, { useState, Fragment } from "react";
import ReactDOM from "react-dom";
import { Formik, FieldArray, Form, Field } from "formik";
import * as Yup from "yup";
function App() {
const [values] = useState({
someNumbers: [1, 2, 3]
});
const validationSchema = Yup.object().shape({
// how can I check for the correct order here?
someNumbers: Yup.array()
});
return (
<div className="App">
<Formik
initialValues={values}
onSubmit={values =>
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
}, 500)
}
validationSchema={validationSchema}
>
{formikProps => (
<Form>
<FieldArray
name="listOfDates"
render={({ move, swap, push, insert, unshift, pop }) => (
<Fragment>
{formikProps.values.someNumbers.map((d, index) => (
<Field type="number" name={`someNumbers.${index}`} />
))}
</Fragment>
)}
/>
<div>
<button type="submit">Submit</button>
</div>
<pre>{JSON.stringify(formikProps.errors, null, 2)}</pre>
<pre>{JSON.stringify(formikProps.values, null, 2)}</pre>
</Form>
)}
</Formik>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);下面是作为码箱的代码。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-16 21:13:08
我想我有点晚了。但这能帮到你：
// Custom Validation
Yup.addMethod(Yup.array, 'sorted', function (message, parser = a => a) {
return this.test('sorted', message, function (list) {
return Boolean(
list
.map(parser)
.reduce((valid, item) => valid && item >= valid && item)
);
});
});然后你就可以做这样的事情：
const arr1 = [1,2,3];
const validationSchema1 = Yup.array().sorted('Shame!');
const arr2 = [{id:1},{id:2},{id:3}];
const validationSchema2 = Yup.array().sorted('Shame!', a => a.id);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59323706
复制相关文章
相似问题
腾讯云开发者
