ReactJS材料-ui输入验证

Question

Input Field

此时，我的验证检查唯一码的长度是否为14。

唯一代码的格式必须为。(4-6-4)示例XXXX-XXXXXX-XXXX

如何使用(4-6-4)让我的输入字段验证格式是否正确

​

    //{Handles inputfields}
    const uniquecodeChange = (e) => {
        // console.log("Input uniquecode", e.target.value);
        if (uniquecodereg.length < 1) {
            Setvalidateform(false)
            console.log('checking error')
        } else if (uniquecodereg.length > 14) {
            Setvalidateform(true)
            console.log('checking true')
        }

        setUniqueCodeReg(e.target.value)
    }





 <WhiteTextField
   variant="outlined"
   placeholder={"XXXX-XXXXXX-XXXX"}
   disabled={registerStatus === 'success'}
   onChange={uniquecodeChange}
  type="text"
  name="code"
  inputProps={{ maxLength: 16 }}
  required={true}
  value={uniquecodereg}
  fullWidth
 />

​

Answer 1

你可以使用正则表达式来测试输入...我不确定你的要求是什么，比如大写，小写，a-z，0-9等等，所以我就把它们都包括进来了。

https://regex101.com/r/i42D74/3

注意我的正则表达式有点生疏了，如果可能的话，任何人都可以随意优化。

基于罗曼的评论进行了优化。

​

var patt = new RegExp("XXXX-XXXXXX-XXXX");
var res = /[a-zA-Z0-9]{4}-[a-zA-Z0-9]{6}-[a-zA-Z0-9]{4}/.test(patt); 

console.log(res);

​