验证 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"

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

有什么方法可以将材料 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" 。
这是一个很好的阅读。

Answer 2

在这里你 go，它工作正常。 用户无法在输入中仅输入数字字母，并且所需的字段验证也可以正常工作：

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