Question

<TextField
    variant="outlined"
    required
    fullWidth
    id="accno"
    label="Main Account No"
    type="number"
    name="accno"
    //inputProps={{ className:"input-acc", pattern: "^.{0,10}$"}}
    autoComplete="accno"
    onChange={(e) => this.handleChange(e)}
    onInput={(e)=>{ 
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,10)
    }}
    min={10}
/>

react material ui Textfield（type = number）验证是否存在10个字符（强制性）。否则，我需要表单验证以显示错误。我尝试了正则表达式模式，因为该字段类型是数字，所以它不起作用。

Answer 1

直观的方法是检查handleChange中的值的长度

onChange={(e) => {
if(e.target.value.toString().length >= 10){
  //display error
 }
this.handleChange(e)
  }
}

您可能还需要在TextField中添加error属性

反应材质ui文本字段（类型=数字）验证是否存在10个字符

1 个答案: