ts+react+antd中的form表单

这两天在写毕设的时候突发奇想，尝试用ts+react+antd完成我的毕设题目，但是因为不会ts语法，所以导致在写登录注册表单的时候就卡住了。。。

记录下解决过程，避免下次遇到。

一、基本步骤

第一步 引入antd中的Form

import { Form } from 'antd'

第二步 定义props

type Iprops = Readonly<{
  form: any
}>

第三步 创建登录表单组件

const Login = (props: Iprops) => {}

第四步 将表单实例化并暴露出去

export default Form.create<Iprops>()(Login);

也可以拆分一下

const LoginForm = Form.create<Iprops>()(Login);
export default LoginForm;

二、表单中的验证功能

1. 必填验证

<Form.Item label='密码' labelAlign="left">
  {
    getFieldDecorator('password', {
      rules: [
        {
          required: true,
          message: '请输入密码'
        }
      ]
    })(<Input.Password />)
  }
</Form.Item>

2. 自定义验证

（1）验证手机号

const { form: { getFieldDecorator } } = props;

const phoneValidator = (rule: any, value: any, callback: any) => {
  const myreg = /^[1][3,4,5,7,8][0-9]{9}$/
  if (!value) {
    callback('请输入手机号！')
  }
  if (!myreg.test(value)) {
      callback('手机号格式不正确!')
  }
  // 必须总是返回一个 callback，否则 validateFields 无法响应
  callback();
}
    
<Form.Item label='手机号' labelAlign="left">
  {
    getFieldDecorator('phone', {
      rules: [
        {
          validator: phoneValidator,
          required: true
        }
      ]
    })(<Input />)
  }
</Form.Item>

（2）验证两次输入的密码是否一致

const { form: { getFieldDecorator, getFieldValue } } = props;

const passwordValidator = (rule: any, value: any, callback: any) => {
  if (value && value !== getFieldValue('password')) {
    callback('两次输入不一致！')
  }
  callback();
}

<Form.Item label='确认密码' labelAlign="left">
  {
    getFieldDecorator('rePassword', {
      rules: [
        {
          required: true,
          validator: passwordValidator
        }
      ]
    })(<Input.Password />)
  }
</Form.Item>

三、提交表单

直接点击底部的button按钮进行提交

const { form: { validateFields } } = props;
const handleLogin = () => {
  validateFields().then((res: any) => {
    message.success('表单验证成功！')
  }).catch(() => {
    message.error('表单验证失败！')
  })
}

四、完整代码

import React, { Component, useState } from 'react'
import { Form, Input, Button, message } from 'antd'

type Iprops = Readonly<{
  form: any
}>

const Login = (props: Iprops) => {
  const { form: { getFieldDecorator, getFieldValue, validateFields } } = props;
    const layout = {
        labelCol: {
            span: 4,
            offset: 4
        },
        wrapperCol: {
          span: 12
        },
    }
    const tailLayout = {
        wrapperCol: {
            offset: 5,
            span: 14
        }
    }
    
    const phoneValidator = (rule: any, value: any, callback: any) => {
      const myreg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!value) {
        callback('请输入手机号！')
      }
      if (!myreg.test(value)) {
          callback('手机号格式不正确!')
      }
      // 必须总是返回一个 callback，否则 validateFields 无法响应
      callback();
    }

    const passwordValidator = (rule: any, value: any, callback: any) => {
      if (value && value !== getFieldValue('password')) {
        callback('两次输入不一致！')
      }
      callback();
    }

    const handleLogin = () => {
      validateFields().then((res: any) => {
        message.success('表单验证成功！')
      }).catch(() => {
        message.error('表单验证失败！')
      })
    }

    return (
        <Form {...layout} name='login'>
            <Form.Item label='手机号' labelAlign="left">
              {
                getFieldDecorator('phone', {
                  rules: [
                    {
                      validator: phoneValidator,
                      required: true
                    }
                  ]
                })(<Input />)
              }
            </Form.Item>

            <Form.Item label='密码' labelAlign="left">
              {
                getFieldDecorator('password', {
                  rules: [
                    {
                      required: true,
                      message: '请输入密码'
                    }
                  ]
                })(<Input.Password />)
              }
            </Form.Item>
            
            <Form.Item label='确认密码' labelAlign="left">
              {
                getFieldDecorator('rePassword', {
                  rules: [
                    {
                      required: true,
                      validator: passwordValidator
                    }
                  ]
                })(<Input.Password />)
              }
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Button type='primary' onClick={handleLogin}>
                    立即登录
                </Button>
            </Form.Item>
        </Form>
    )
}

export default Form.create<Iprops>()(Login);

新手上路，欢迎多多评价👏