Question

我想使用带有响应的蚂蚁设计来验证密码。但是，蚂蚁设计没有任何验证，我该怎么做？请帮助我。

 const LoginForm = Form.create()(props => {
  const { getFieldDecorator } = props.form;
  return (
    <Form onSubmit={props.onSubmit} className="form-size form-margin">
      <FormItem>
        {getFieldDecorator("email", {
          rules: [
            {
              type: "email",
              message: "The input is not valid E-mail!"
            },
            { required: true, message: "Please input your username!" }
          ]
        })(<Input placeholder="Email" />)}
      </FormItem>
      <FormItem>
        {getFieldDecorator("password", {
          rules: [{ required: true, message: "Please input your Password!" }]
        })(<Input type="password" placeholder="Password" />)}
      </FormItem>
      <FormItem>
        <Button type="primary" htmlType="submit" className="login-form-button">
          Log in
        </Button>
      </FormItem>
      <span style={{ color: "red" }}>
        {props.loginStatus ? "" : props.loginMessage}
      </span>
    </Form>
  );
});

Answer 1

使用validator规则：

  const validatePassword = (rule, value, callback) => {
    if (value && value !== "Secret") {
      callback("Error!");
    } else {
      callback();
    }
  };

  <FormItem>
    {getFieldDecorator("password", {
      rules: [
        { required: true, message: "Please input your Password!" },
        { validator: validatePassword }
      ]
    })(
      <Input 
        type="password" 
        placeholder="Password" 
      />
    )}
  </FormItem>

Answer 2

如果您想拥有strong password，我建议您使用password-validator

  const schema = new passwordValidator()
  let strongPwd = 0
  schema
    .is().min(6)
    .is().max(100)
    .has().uppercase()
    .has().lowercase()
    .has().digits()

  const list = schema.validate('password', { list: true })

我想使用对蚂蚁设计的反应来验证密码

2 个答案: