Ant Design 3.25.0中如何进行表单验证

最新推荐文章于 2023-09-04 17:36:48 发布
最新推荐文章于 2023-09-04 17:36:48 发布
阅读量328 收藏
点赞数
分类专栏： React Ant Design 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duansamve/article/details/116033261
版权

index.jsx（父组件）：

import React from 'react'
import { Row, Col, Card, Input, Button, Table, Tag, Modal, message, Tooltip } from 'antd';
import moment from 'moment'
import axios from 'axios'
import 'moment/locale/zh-cn';
import "./question.css"
import CreateQuestionForm from './create-question'

export default class MenuCom extends React.Component {
    state = {
        // 创建问题
        createQuestion_visible: false,
    }


    /**
     * 新建问题
     */
    createQuestion_onSelectTime = (value, dateString) => {
        console.log('value：', value)
        console.log('dateString：', dateString)
    }

    createQuestion_showModal = () => {
        this.setState({
            createQuestion_visible: true
        })
    }

    createQuestion_onOk = (values, editorContent) => {
        let params = {
            title: values.createQuestion_title,
            devices: values.createQuestion_equipment,
            asset: values.createQuestion_asset,
            priority: values.createQuestion_priority,
            type: values.createQuestion_type,
            description: editorContent,
            assign_by: values.createQuestion_assignedTo,
            status: values.createQuestion_status,
            release: values.createQuestion_version,
            model: values.createQuestion_model,
            user: localStorage.getItem('nickname'),
            start_time: moment(values.createQuestion_time[0]).format("YYYY-MM-DD"),
            finish_time: moment(values.createQuestion_time[1]).format("YYYY-MM-DD")
        }

        axios({
            method: "POST",
            url: "/api/bug/buginfo/",
            data: JSON.stringify(params)
        }).then(resp => {
            this.getData(1, 5);
            message.success('添加问题成功。');
            this.setState({
                createQuestion_visible: false
            });
        }, err => {
            message.error("添加问题失败。");
        });
    }

    createQuestion_onCancel = () => {
        this.setState({
            createQuestion_visible: false
        })
    }

    render() {
        return (<div>
            <Card>
                <Row>
                    <Col span={8}>
                        <Input.Search placeholder="搜索问题" onSearch={this.onSearchTitle} enterButton />
                    </Col>
                    <Col span={6} offset={10} style={{ "textAlign": 'right' }}>
                        <Button type="primary" icon="zoom-in" style={{ marginRight: 15 }} onClick={() => this.setState({
                            advancedSearch_visible: true
                        })}>高级搜索</Button>
                        <Button type="primary" icon="plus" onClick={() => this.createQuestion_showModal()}>新建问题</Button>
                    </Col>
                </Row>
            </Card>

            <Modal
                title="新建问题"
                visible={this.state.createQuestion_visible}
                width={900}
                onOk={this.createQuestion_onOk}
                onCancel={this.createQuestion_onCancel}
                okText="确认"
                cancelText="取消"
                style={{ top: 5 }}
                // afterClose={this.createQuestion_onAfterClose}
                maskClosable={false}
                destroyOnClose={true}
                footer={null}
            >
                <CreateQuestionForm get_createQuestion_onOk={this.createQuestion_onOk} assignByUser={this.state.assign_by_user}/>
            </Modal>
        </div >)
    }
}

表单组件create-question.jsx（子组件）：

import React from 'react'
import { Row, Col, Form, Input, Button, Select, DatePicker, message } from 'antd';
import E from 'wangeditor'
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import "./question.css"

class CreateQuestion extends React.Component {
  handleSubmit = e => {
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        const editorContent = this.createQuestion_descriptionWangEditor.txt.html();
        if(editorContent.length !== 0){
          this.props.get_createQuestion_onOk(values, editorContent);
        }else{
          message.error("描述不能为空。");
        }
      }
    });
  };

  createQuestion_descriptionWangEditor = {}; // 编辑器

  componentDidMount() {
    this.createQuestion_descriptionWangEditor = new E(document.getElementById("createQuestion_description"));
    this.createQuestion_descriptionWangEditor.config.uploadImgServer = `/api/bug/create_upload/?x-token=${localStorage.getItem('token')}`;
    this.createQuestion_descriptionWangEditor.config.uploadFileName = 'createQuestion_descriptionImg';
    this.createQuestion_descriptionWangEditor.config.height = 100;
    this.createQuestion_descriptionWangEditor.config.showLinkImg = false;
    this.createQuestion_descriptionWangEditor.config.uploadImgTimeout = 60 * 1000;
    this.createQuestion_descriptionWangEditor.config.placeholder = '请输入描述内容（必填）';
    this.createQuestion_descriptionWangEditor.config.menus = [
      'head',  // 标题
      'bold',  // 粗体
      'fontSize',  // 字号
      'fontName',  // 字体
      'italic',  // 斜体
      'underline',  // 下划线
      'strikeThrough',  // 删除线
      'foreColor',  // 文字颜色
      'backColor',  // 背景颜色
      //'link',  // 插入链接
      'list',  // 列表
      'justify',  // 对齐方式
      'quote',  // 引用
      'emoticon',  // 表情
      'image',  // 插入图片
      //'table',  // 表格
      //'video',  // 插入视频
      'code',  // 插入代码
      'undo',  // 撤销
      'redo'  // 重复
  ]

    this.createQuestion_descriptionWangEditor.config.uploadImgHooks = {
      customInsert: function (insertImg, result) {
        if (!result.error) {
          insertImg(result.data.url);
        } else {
          message.error(result.error);
        }
      }
    }

    /**一定要创建 */
    this.createQuestion_descriptionWangEditor.create()
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onSubmit={this.handleSubmit}>
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} label="主题">
          {getFieldDecorator('createQuestion_title', {
            rules: [{ required: true, message: '请输入主题!' }],
          })(
            <Input />
          )}
        </Form.Item>
        <Row>
          <Col span={12}>
            <Form.Item label="资产">
              {getFieldDecorator('createQuestion_asset', {
                rules: [{ required: true, message: '请输入资产名称!' }],
              })(
                <Input placeholder="请输入资产名称" />
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="设备">
              {getFieldDecorator('createQuestion_equipment', {
                rules: [{ required: true, message: '请输入设备名称!' }],
              })(
                <Input placeholder="请输入设备名称" />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="优先级">
              {getFieldDecorator('createQuestion_priority', {
                rules: [{ required: true, message: '请选择优先级!' }],
              })(
                <Select placeholder="请选择优先级" style={{ width: '100%' }}>
                  <Select.Option value="0">低</Select.Option>
                  <Select.Option value="1">中</Select.Option>
                  <Select.Option value="2">高</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="时间">
              {getFieldDecorator('createQuestion_time', {
                rules: [{ required: true, message: '时间不能为空!' }],
              })(
                <DatePicker.RangePicker locale={locale} style={{ width: '100%' }} onChange={() => this.createQuestion_onSelectTime} />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="状态">
              {getFieldDecorator('createQuestion_status', {
                rules: [{ required: true, message: '请选择状态!' }],
              })(
                <Select placeholder="请选择状态" style={{ width: '100%' }}>
                  <Select.Option value="0">新建</Select.Option>
                  <Select.Option value="1">处理中</Select.Option>
                  <Select.Option value="2">已解决</Select.Option>
                  <Select.Option value="3">已忽略</Select.Option>
                  <Select.Option value="4">待反馈</Select.Option>
                  <Select.Option value="5">已关闭</Select.Option>
                  <Select.Option value="6">重新打开</Select.Option>
                  <Select.Option value="7">已指定</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="类型">
              {getFieldDecorator('createQuestion_type', {
                rules: [{ required: true, message: '请选择类型!' }],
              })(
                <Select placeholder="请选择类型" style={{ width: '100%' }}>
                  <Select.Option value="0">Bug</Select.Option>
                  <Select.Option value="1">任务</Select.Option>
                  <Select.Option value="2">功能</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="版本">
              {getFieldDecorator('createQuestion_version', {
                rules: [{ required: true, message: '请选择版本!' }],
              })(
                <Select placeholder="请选择版本" style={{ width: '100%' }}>
                  <Select.Option value="0">无</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="模块">
              {getFieldDecorator('createQuestion_model', {
                rules: [{ required: true, message: '请选择模块!' }],
              })(
                <Select placeholder="请选择模块" style={{ width: '100%' }}>
                  <Select.Option value="0">无</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="指派给">
              {getFieldDecorator('createQuestion_assignedTo', {
                rules: [{ required: true, message: '请选择指派人!' }],
              })(
                <Select placeholder="请选择指派人" style={{ width: '100%' }}>
                  {
                    this.props.assignByUser.map((value, index) => (<Select.Option value={value} key={value}>{value}</Select.Option>))
                  }
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>

          </Col>
        </Row>
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} label="描述" name="createQuestion_description">
          <div id="createQuestion_description"></div>
        </Form.Item>
        <Form.Item wrapperCol={{ span: 24 }} style={{textAlign: "right", paddingBottom: 15}}>
          <Button type="primary" htmlType="submit">
            新建
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const CreateQuestionForm = Form.create({ name: 'create_question' })(CreateQuestion);

export default CreateQuestionForm;

其中：

  handleSubmit = e => {
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        const editorContent = this.createQuestion_descriptionWangEditor.txt.html();
        if(editorContent.length !== 0){
          this.props.get_createQuestion_onOk(values, editorContent);
        }else{
          message.error("描述不能为空。");
        }
      }
    });
  };
      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onSubmit={this.handleSubmit}>
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} label="主题">
          {getFieldDecorator('createQuestion_title', {
            rules: [{ required: true, message: '请输入主题!' }],
          })(
            <Input />
          )}
        </Form.Item>
        <Row>
          <Col span={12}>
            <Form.Item label="资产">
              {getFieldDecorator('createQuestion_asset', {
                rules: [{ required: true, message: '请输入资产名称!' }],
              })(
                <Input placeholder="请输入资产名称" />
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="设备">
              {getFieldDecorator('createQuestion_equipment', {
                rules: [{ required: true, message: '请输入设备名称!' }],
              })(
                <Input placeholder="请输入设备名称" />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="优先级">
              {getFieldDecorator('createQuestion_priority', {
                rules: [{ required: true, message: '请选择优先级!' }],
              })(
                <Select placeholder="请选择优先级" style={{ width: '100%' }}>
                  <Select.Option value="0">低</Select.Option>
                  <Select.Option value="1">中</Select.Option>
                  <Select.Option value="2">高</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="时间">
              {getFieldDecorator('createQuestion_time', {
                rules: [{ required: true, message: '时间不能为空!' }],
              })(
                <DatePicker.RangePicker locale={locale} style={{ width: '100%' }} onChange={() => this.createQuestion_onSelectTime} />
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="状态">
              {getFieldDecorator('createQuestion_status', {
                rules: [{ required: true, message: '请选择状态!' }],
              })(
                <Select placeholder="请选择状态" style={{ width: '100%' }}>
                  <Select.Option value="0">新建</Select.Option>
                  <Select.Option value="1">处理中</Select.Option>
                  <Select.Option value="2">已解决</Select.Option>
                  <Select.Option value="3">已忽略</Select.Option>
                  <Select.Option value="4">待反馈</Select.Option>
                  <Select.Option value="5">已关闭</Select.Option>
                  <Select.Option value="6">重新打开</Select.Option>
                  <Select.Option value="7">已指定</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="类型">
              {getFieldDecorator('createQuestion_type', {
                rules: [{ required: true, message: '请选择类型!' }],
              })(
                <Select placeholder="请选择类型" style={{ width: '100%' }}>
                  <Select.Option value="0">Bug</Select.Option>
                  <Select.Option value="1">任务</Select.Option>
                  <Select.Option value="2">功能</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="版本">
              {getFieldDecorator('createQuestion_version', {
                rules: [{ required: true, message: '请选择版本!' }],
              })(
                <Select placeholder="请选择版本" style={{ width: '100%' }}>
                  <Select.Option value="0">无</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="模块">
              {getFieldDecorator('createQuestion_model', {
                rules: [{ required: true, message: '请选择模块!' }],
              })(
                <Select placeholder="请选择模块" style={{ width: '100%' }}>
                  <Select.Option value="0">无</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="指派给">
              {getFieldDecorator('createQuestion_assignedTo', {
                rules: [{ required: true, message: '请选择指派人!' }],
              })(
                <Select placeholder="请选择指派人" style={{ width: '100%' }}>
                  {
                    this.props.assignByUser.map((value, index) => (<Select.Option value={value} key={value}>{value}</Select.Option>))
                  }
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>

          </Col>
        </Row>
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} label="描述" name="createQuestion_description">
          <div id="createQuestion_description"></div>
        </Form.Item>
        <Form.Item wrapperCol={{ span: 24 }} style={{textAlign: "right", paddingBottom: 15}}>
          <Button type="primary" htmlType="submit">
            新建
          </Button>
        </Form.Item>
      </Form>
const CreateQuestionForm = Form.create({ name: 'create_question' })(CreateQuestion);

export default CreateQuestionForm;

是关键。

子组件如何调用父组件的方法?

通过props，比如：

父组件中：

<CreateQuestionForm get_createQuestion_onOk={this.createQuestion_onOk} />

子组件中： 

this.props.form.validateFields((err, values) => {
      if (!err) {
        const editorContent = this.createQuestion_descriptionWangEditor.txt.html();
        if(editorContent.length !== 0){
          this.props.get_createQuestion_onOk(values, editorContent);
        }else{
          message.error("描述不能为空。");
        }
      }
    });

中通过

this.props.get_createQuestion_onOk(values, editorContent);

调用父组件的“createQuestion_onOk”方法。

duansamve
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
calico V3.25.0 镜像
06-24
k8s calico V3.25.0 镜像包
CMake编译器3.25.0 window 64位
最新发布
03-17
CMake不是直接进行编译和链接的工具，而是生成特定平台的构建文件，如Visual Studio的解决方案文件或Unix Makefiles，然后由这些生成的文件来执行实际的构建工作。 CMake的设计目标是简化项目配置，让开发者能够...
ant Design 表单以及表单验证
qq_44766377的博客
12-22 3025
今天写了个修改密码的功能，随便记录一下 效果图 html代码 <div> <a-modal v-model="visible" title="修改密码" on-ok="handleOk"> <template slot="footer"> <a-button key="back" @click="handleCancel"> 取消 </a-button>
Ant Design 表单验证，循环验证，条件验证
weixin_44365083的博客
09-04 464
通过formIndex来拼接循环的prop字段，然后rules里面通过三元判断是否需要验证，不需要验证就为null。用的是公司基于ant design开发的ui组件，但是大部分都是一样的。
ant design form表单验证问题
qq_41632427的博客
05-30 111
​ 目录 前言 导语 解决思路 总结 前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 歌谣 歌谣 这个表单是需要做验证的 再react的开发过程中有些表单验证是需要有其他方式...
ant design 表单校验
m0_65960180的博客
03-20 265
3.4.if (!err) {})
Ant Design Vue 2.2.8 表格表单验证
Wannaer的博客
11-08 3207
刚刚接触 Ant Design Vue 2.2.8 有一个简单的需求需要实现表格的表单验证功能。但在官网demo和API中找了很久都没有发现实现功能的方法，网上能找到的实现案例大部分是基于 Ant Design Vue 1.1.5 的版本 使用 FormModel 表单。但 2.2.8 FormModal 移除了。以上就是记录碰见的问题内容，本文仅仅简单实现表格验证问题， 如果有不足希望能够评论指导一下。
nexus-3.25.0-03-win64安装包
12-16
在这个“nexus-3.25.0-03-win64安装包”中，我们主要探讨以下几个关键知识点： 1. **Nexus仓库管理器**：Nexus作为一款企业级的软件仓库管理器，它不仅支持Maven仓库，还支持npm、RubyGems、Docker等多种类型的仓库...
FileZilla 客户端 v3.25.0 rc1
12-01
FileZilla是一个开源的FTP客户端软件，分为客户端版本和服务器版本，具备所有的FTP软件功能。可控性、有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP客户端工具，而FileZilla ...
calico v3.25.0镜像以及yaml文件下载
09-20
使用它可以避免在kubernetes集群搭建过程中calico镜像无法下载的问题。 操作方法： 首先需先安装docker linux解压，unzip calico-image-v3.25.0.zip，获得calico.yaml和calico-image-v3.25.0.tar两个文件；使用 ...
vue 项目antDesign动态表单添加校验案例
肖帅的博客
11-25 9423
vue 项目antDesign动态表单添加校验 如下图所示 1，在表单页面中，a-form-model-item 标签可嵌套 2，使用prop传值时使用form表单定义的字段 主要代码如下 <div class="form_area" v-for="(item, index) in form.domains" :key="index"> <a-form-model-item style="display: inline-block;text-align: le
antd提交表单_关于antd的表单验证
weixin_42509624的博客
02-22 974
有时候验证不了，可能需要加上submittingconst {form: { getFieldDecorator },submitting,} = this.props;有时候发现验证不生效，点击了提交但是没反应。原因是自定义验证规则写错了。{getFieldDecorator('contactPhone', {initialValue: baseInfo.contactPhone,rules: ...
antd Form 表单校验方法无响应
qq_36800820的博客
09-30 3772
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响...
AntdPro上传文件之Antd各个版本的对比
Welkin_qing的博客
04-15 2436
文章目录一、antd3上传图片二、antd4上传文件三、使用antdPro 之前一直在使用antd上传文件，图片，从antd3到antd4再到antdPro，总结一下经验吧 一、antd3上传图片 这里用的antd的版本是"antd": "^3.25.0", import React, { FC, forwardRef, useState, memo } from 'react'; import { Button, Icon, Upload as AntdUpload, Spin } from 'antd'
自定义底部按钮
weixin_44174536的博客
10-25 383
指定BasicForm的buttonRender属性，可以自定义底部显示按钮，默认为{locale.submit}。 使用React.createRef()获得React元素。 buttonRender = ()=>{ return <> 提交 重置 更改数据源 </>; } render(){ return <BasicFormItem type={‘inp...
用ant.design实现一个form table，实现在table中输入和校验。并且获取table列表值
吃瓜群众的博客
02-09 8269
用ant.design实现一个table表格，实现输入和校验。能够实时获取form值 实现效果如图 代码如下 ListTableForm.tsx import React, { useEffect, useState } from "react"; import { Form, Table } from 'antd' import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons"; import styles f
ant design vue自定义表单验证不生效和自定义校验内容有值后自动清除警告的方法
动感超人的博客
10-19 6821
从而如果有警告提示信息,尽管用户在之后输入了新值,也依旧会有报错,那么要怎么解决呢?有时候我们使用了自定义规则校验,无论是。
ant design vue的使用过程，遇到问题记录
Study_Live_Sun的博客
09-30 765
1、异步TreeSelect 树型选择控件，回显问题 解决思路，记录各个节点的分支的所有ID，从第一层开始遍历，判断是否包含选中的ID，不断补充children 代码如下 <a-form-model-item label="中图法分类号"> <a-tree-select ref="tree_select" :replaceFields="replaceFields" v-model="fo
antd中的form表单中的wrapperCol和labelCol问题
hhhhhhaaaaaha的博客
10-12 8259
antd是大部分人可以接触到的ui组件库，而自己公司内部的ui组件库和antd类似，于是就以antd举例子对form表单的布局做一些详细的解释，有不懂的或者有错误的欢迎提出
cmake-3.25.0下载
08-22
要下载cmake-3.25.0，你可以按照以下步骤进行操作： 1. 首先，将cmake-3.25.0.tar.gz文件解压到/root目录中。使用以下命令解压文件： ```shell tar zxvf cmake-3.25.0.tar.gz ``` 2. 将解压后的cmake-3.25.0...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值