Return 来自 Material 的布尔值 UI 在 Yup.when Validation 中使用的无线电

Question

是的，允许使用 .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),
    })
});

Material UI 的单选表单仅允许 value 字段中的字符串值。示例：

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

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

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

我想做的是：如果 isBig returns 为真，则要求 count 是一个至少有 5 位数字的数字，否则忽略它。

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

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

Answer 1

为验证驱出一个字符串应该不是问题。另外 min(5) 并不意味着最少五位数字，它意味着一个数字 >= 5。对于至少 5 位数字，您需要 min(10000).

这是在字符串上使用 when 的示例。如果您转到 CodeSandbox，您会看到 myForm1 无效（强制执行最小值 10000，因为 "a" 匹配），但 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);

Return 来自 Material 的布尔值 UI 在 Yup.when Validation 中使用的无线电

Return boolean value from Material UI Radio to use in Yup .when Validation

validation

reactjs

material-ui

yup