antd v4版本Form表单的提交与数据检验--登录--validateFields()、getFieldValue('XXX')、rules{[{正则匹配，...}]}

整个form表单——以登陆为例，这是整个登陆组件

效果如图：

 

1.表单点击提交后，会触发onFinish函数，在这个函数里将会获取到前端输入的数据，新版本validateFields的返回值是promise，在官网有提到，但是没有实际的完整例子。

this.formRef.current.validateFields().then((value)=>{...}).catch(err=>{...})

2.表单的验证，比如对输入的要求：长度、组成等，可以在Form.item标签的rules属性直接写规则，

3.表单的验证，也可以通过getFieldValue('XXX')：XXX和Form.Item的name相对应

rules={[
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    console.log(getFieldValue('password'),value)
                    return Promise.reject(new Error('两次密码不匹配'));
                  },
                }),
              ]}

export default class Login extends Component {
  // 得到强大的form实体、有验证、有获取数据等等
  formRef = React.createRef();
  
  onFinish = (event) => {
    console.log(this.formRef.current.validateFields())
　　//验证方法三，也是页面拿到数据后的处理操作，也可以进行检验，新版本返回的是promise
    this.formRef.current.validateFields().then(value => { 
        // 验证通过后进入 
        console.log(value);  
        }).catch(err => { // 验证不通过时进入
           console.log(err); 
        });
    console.log('Received values of form: ', event)
  }
  
  render() {
    return (
      <div className='login'>
        <header className='login-header'>
          <img src={logo} alt="图标加载失败" />
          <h1>React 后台管理系统</h1>
        </header>
        <section className='login-content'>
          <h2>用户登录</h2>
          {/* antd组件 */}
          <Form ref={this.formRef}
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish}
          >
            {/* 用户名字 校验规则rules */}
            <Form.Item
              name="username"
              rules={[
                {
                  type:'string',
                  required: true,
                  message: '请输入用户名!',
                  pattern:/\w+/,
                  whitespace:true,
                  max:12,
                  min:4
                },
              ]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            </Form.Item>
            {/* 用户密码 */}
            <Form.Item
              name="password"
              rules={[
                {
                  type:'string',
                  required: true,
                  message: '请输入密码!',
                  pattern:/\w+/,
                  whitespace:true,
                  max:12,
                  min:4
                },
              ]}
            >
              <Input prefix={<LockOutlined className="site-form-item-icon" />} placeholder="Password" />
            </Form.Item>
            {/* 用户密码确认 */}
            <Form.Item
              name="Confirmpassword"
              rules={[
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    console.log(getFieldValue('password'),value)
                    return Promise.reject(new Error('两次密码不匹配'));
                  },
                }),
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="请再次输入Password"
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>Remember me</Checkbox>
              </Form.Item>

              {/* <a className="login-form-forgot" href="">
                Forgot password
              </a> */}
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                Log in
              </Button>
              {/* Or <a href="">register now!</a> */}
            </Form.Item>
          </Form>
        </section>
      </div>
    )
  }
}