验证 Number 类型的 TextField

Question

我正在使用这个文本字段：

 <TextField
    variant="outlined"
    margin="normal"
    id="freeSeats"
    name="freeSeats"
    helperText={touched.freeSeats ? errors.freeSeats : ''}
    error={touched.freeSeats && Boolean(errors.freeSeats)}
    label="Free Seats"
    value={freeSeats}
    onChange={change.bind(null, 'freeSeats')}
  />

通过此验证：

export const schema = Yup.object({
  freeSeats: Yup.number()
    .required('This Field is Required')
    .typeError('A Number is Required'),
});

它运行良好，在我输入字母时显示错误。但是，当我添加

type="number"

在文本字段内，显示增加/减少数值的箭头，但验证不再有效。所以即使我写了一个字母，它也不会给我一个错误。如果我在输入字母后移动到另一个文本字段，则输入只会与标签重叠，就好像根本没有输入一样。

有什么方法可以让材料 UI 编号类型箭头与验证保持一致？

https://codesandbox.io/s/tender-wind-zwh6i?file=/src/App.tsx

Answer 1

下面是发生的事情。

• <input type="number"> 在 DOM API 级别的该字段中是validation的最低级别。
  所以浏览器通过添加那些小箭头来处理这个问题，以表示只需要numbers。当您输入任何 letters 时，浏览器不会抱怨，但它们不会默默地接受 value。

• 因此，为了改善这种行为，大多数库都提出了高级validation。
  这就是Yup 和许多表单包出现的地方。

这种冲突的行为是因为 DOM“静默低级”验证类型推翻了您的 Yup“高级”验证。

实际上，在不支持type="number" 的浏览器上，该输入会退回到type="text"。
Here's on a good read on this。

Answer 2

给你，它工作正常。用户无法在输入中仅输入数字字母，并且必填字段验证也可以正常工作：

https://codesandbox.io/s/vigorous-goodall-wgw2w