使用ValidatorForm一次显示所有密码策略错误消息吗?

时间:2019-02-19 19:27:57

标签: reactjs validation material-ui

我正在将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}
          />

就目前而言,即使还有更多无效的策略,我从列表中也只会收到一条错误消息。我想知道是否可以同时显示所有错误消息。

谢谢。

0 个答案:

没有答案
相关问题