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"

在文本字段中，出现了用于增加/减小数值的箭头，但是验证不再起作用。因此，即使我写了一个字母，也不会给我一个错误。并且如果我在输入字母后移至另一个文本字段，则输入将与标签重叠，就好像根本没有输入一样。

有什么办法可以使用户界面编号数字的箭头与验证一起保留吗？

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

验证类型为TextField的文本字段

2 个答案: