How does ant design customize form validation?

how does react ant use custom form validation?

1. Code

const Login = (
  {
    loading,
    dispatch,
    form: {
      getFieldDecorator,
      validateFieldsAndScroll
    },
  }
  ) => {
  function handleOk() {
    validateFieldsAndScroll((errors, values) => {
      if (errors) {
        console.log(`${errors}`);
        return
      }

      dispatch({type: "login/login", payload: values}) //models
    });
  }
  return (
    <div className={styles.form}>
      <div className={styles.logo}>
        <img alt="logo" src={logo_img}/>
        <span>Light of Hope</span>
      </div>
      <form>
        <FormItem hasFeedback>
          {getFieldDecorator("username", {
            rules: [
              {
                required: true,
                message:""
              }
            ],
            // initialValue: "admin", //
          })(<Input prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)", fontSize:16 }} />} onPressEnter={handleOk} placeholder=""/>)}
        </FormItem>
        <FormItem hasFeedback>
          {getFieldDecorator("password", {
            rules: [
              {
                required: true,
                message:""
              },
              {
                validator(rule, values, callback){
                  if(rule&&values.length>0){
                    console.log("")
                  }else{
                    callback(
                      console.log("")
                    );
                  }
                }
              }
            ],
            // initialValue: "123456",//
          })(<Input prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" , fontSize:16}} />}  type="password" onPressEnter={handleOk} placeholder=""/>)}
        </FormItem>
        <Row>
          <Button type="primary" onClick={handleOk} loading={loading.effects.login}>
            
          </Button>
          

<span>Username:admin</span> <span>Password:123456</span>

</Row> </form> </div> ) };

2. For example: what should I do if I want to verify that the password must be greater than 6 digits and contain at least one letter? Checked on the Internet and said that you can use validator to achieve custom verification, but I am a little new as a react is not very good at it, please, you can give me a lot of advice!


use regular expressions


it's so simple that you don't need validator.. Just write more than one rule.

  async-validator  

Menu