1

是的，允许使用基于另一个值的验证.when。

例子：

var inst = yup.object({
  isBig: yup.boolean(),
  count: yup
    .number()
    .when('isBig', {
      is: true, // alternatively: (val) => val == true
      then: yup.number().min(5),
      otherwise: yup.number().min(0),
    })
});

valueMaterial UI 的 Radio 表单只允许在字段中使用字符串值。例子：

<Radio
 checked={this.state.selectedValue === 'a'}
 onChange={this.handleChange}
 value="a"
 name="radio-button-demo"
 aria-label="A"
/>

将值更改为：value={true}或字符串以外的任何值都会破坏 Radio 组件。在 yup 验证中强制使用无线电值yup.boolean没有帮助。

我的替代方案是切换到内联验证，这不是主意。

我正在尝试做的事情：如果isBig返回 true，则要求 count 是一个至少为 5 位的数字，否则忽略它。

我在这里想念什么？有没有办法通过 yup 有条件地验证相关值，然后使用 .when 以外的检查？或者，我是否在 Radio 组件中遗漏了一些明显的东西？

感谢任何帮助，Yup 在线示例不会超出 Yup 文档提供的示例。

4

1 回答 1

0

从字符串中取出进行验证应该不是问题。也不min(5)意味着最少五位数，它意味着一个数字 >= 5。对于最少 5 位数，您需要min(10000).

when这是在字符串上使用的示例。如果你去 CodeSandbox，你会发现它myForm1是无效的（因为 "a" 匹配，所以强制最小值为 10000），但myForm2它是有效的，因为 "b" 不匹配条件。

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import * as yup from "yup";

const myForm1 = {
  radioValue: "a",
  num: 1234
};
const myForm2 = {
  radioValue: "b",
  num: 1234
};
const schema = yup.object({
  radioValue: yup.string(),
  num: yup.number().when("radioValue", {
    is: "a",
    then: yup.number().min(10000),
    otherwise: yup.number().min(0)
  })
});

function App() {
  const [myForm1IsValid, setMyForm1IsValid] = useState(null);
  const [myForm2IsValid, setMyForm2IsValid] = useState(null);
  useEffect(async () => {
    setMyForm1IsValid(await schema.isValid(myForm1));
    setMyForm2IsValid(await schema.isValid(myForm2));
  }, []);
  return (
    <div className="App">
      <h1>myForm1 is valid: {JSON.stringify(myForm1IsValid)}</h1>
      <h1>myForm2 is valid: {JSON.stringify(myForm2IsValid)}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

编辑是的

于 2019-02-19T22:15:57.753 回答