我正在将ReactJS用于一个项目,并将Material UI用于主题。我找到了一个名为react-material-ui-form-validator
的库,该库用于创建用于更改密码的表单。我已经在我的ComponentDidMount中添加了以下验证规则:
ValidatorForm.addValidationRule("isMatch", () => {
if (this.state.newPassword !== this.state.repeatPassword) {
return false;
}
return true;
});
ValidatorForm.addValidationRule("hasNumber", value => {
return /\d/.test(value);
});
ValidatorForm.addValidationRule("hasLowercase", value => {
return value.toUpperCase() !== value;
});
ValidatorForm.addValidationRule("hasUppercase", value => {
return value.toLowerCase() !== value;
});
ValidatorForm.addValidationRule("minLength", value => {
return value.length >= 8;
});
ValidatorForm.addValidationRule("hasSpecial", value => {
return !/^[A-Za-z0-9 ]+$/.test(value);
});
,并在我的参数中添加了以下内容:
<TextValidator
label="New Password"
onChange={this.HandleChange}
name="newPassword"
type="password"
validators={[
"required",
"hasNumber",
"hasLowercase",
"hasUppercase",
"minLength",
"hasSpecial"
]}
errorMessages={[
"This field is required",
"Password requires numbers",
"Password requires lowercase letters",
"Password requires uppercase letters",
"Password must be 8 or more characters",
"Password must contain special characters"
]}
value={this.state.newPassword}
/>
就目前而言,即使还有更多无效的策略,我从列表中也只会收到一条错误消息。我想知道是否可以同时显示所有错误消息。
谢谢。