我想使用与 ant design 的反应来验证密码

Question

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

 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>