【每天学一点-08】Antd 动态增减表单项，默认展示一项

最新推荐文章于 2024-08-19 15:32:24 发布

卡鲁耶克

最新推荐文章于 2024-08-19 15:32:24 发布

阅读量355

点赞数

文章标签： javascript 前端 react 正则表达式

本文链接：https://blog.csdn.net/weixin_43906233/article/details/134140816

版权

本文介绍了如何在React项目中使用Ant Design库动态增减表单项，并针对手机号进行校验。详细讲解了具体需求，包括至少添加一个手机号，以及手机号的验证规则。代码部分展示了在Form.List中设置initialValue来实现默认显示一项手机号的示例。文章最后提到了所使用的React、Antd和evian库的版本。

摘要由CSDN通过智能技术生成

一、具体需求

1、动态添加手机号；

2、手机号需要校验规则；

3、至少填写一个手机号；

4、最后提交一个包含手机号的数组；

二、代码部分

代码（index.tsx）

import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
import { Form, Input, Button } from 'antd';
import { isEmpty } from 'evian';
import React from 'react';
import './index.less';

/* --手机号校验规则-- */
const phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;

function notPhoneNumber(payload: any) {
  return !phoneReg.test(payload);
}
function phoneValidator(rule: any, value: any) {
  if (isEmpty(value)) return Promise.reject('必填项');
  if (notPhoneNumber(value)) {
    return Promise.reject('手机号格式错误');
  }
  return Promise.resolve();
}
/* ---------------- */

const FormGroup: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = (value: any) => {