对密码字段进行反应验证

Question

        <TextField
          id="outlined-basic"
          label="Password"
          variant="outlined"
        />

需要帮助来使用 onchange function 逻辑创建密码验证？ 请帮助我了解以下密码验证规则 最小字符长度为 8 字符长度最大为 64。密码组成：至少 1 个大小写字符、1 个数字和 1 个特殊字符 密码中允许有空格，但不能在密码的开头或结尾密码不包含用户名

Answer 1

我认为验证表单的最佳方法是mui-validate库。 所以你可以简单地通过将它们包装到一个<ValidationGroup />组件中来验证你的输入

   import { Validate } from 'mui-validate';

export default () => (
    <ValidationGroup>
        <>
            ...
            <Validate name="internal key 1" required>
                <TextField />
            </Validate>
            <Validate name="internal key 2" unique={['a', 'b']}>
                <TextField />
            </Validate>
            <Validate name="internal key 3" regex={/^\d{0,5}$/}>
                <TextField />
            </Validate>
            <Validate name="internal key 4" custom={[(value) => value === 'expected value', 'Custom validation failed!']}>
                <TextField />
            </Validate>
            ...
        </>
    </ValidationGroup>
)

对于密码强度，您可以使用类似于以下的普通正则表达式：

const passwordPattern = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,64}$/;