ant Desigin Form表单验证

简介: ant Desigin Form表单验证

手机号验证

// 需要正确的号码位数
<Form.Item
  name="telephone"
  label="手机号"
  rules={[
    { required: true, message: '请输入手机号' },
    {
      pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
      message: '请输入正确手机号'
    }
  ]}
>
  <Input />
</Form.Item>


邮箱验证

// 需要 字符串+@+字符串+.+字符串
<Form.Item
  name="email"
  label="邮箱"
  rules={[
    { required: true, message: '请输入邮箱' },
    {
      pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
      message: '邮箱格式不正确'
    }
  ]}
>
  <Input type="email" />
</Form.Item>


输入框最少字数验证

//提交时验证
  const submit = () => {
    const resumeEvaluation = form.getFieldValue('resumeEvaluation')
    if (resumeEvaluation.length < 10) {
      message.info('评语至少输入10字')
      focus()
      return
    }
 
    create()
  }
 
 
<Form.Item
              name='resumeEvaluation'
              label='评语'
              rules={[{ required: true, message: '请输入简历评语' }]}
            >
              <Input.TextArea
                rows={4}
                id='resumeEvaluation'
                showCount
                ref={nameInputRef}
                minLength={10}
                placeholder='至少输入10字评语'
                onChange={onChangeEvaluation}
                value={evaluationRef as unknown as string}
              />
            </Form.Item>
目录
打赏
0
0
0
0
3
分享
相关文章
ant-design Upload上传组件使用 编辑功能图片回显
ant-design Upload上传组件使用 编辑功能图片回显
1109 0
Maven编译报错:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.13.0:compile 解决方案
在执行Maven项目中的`install`命令时,遇到编译插件版本不匹配的错误。具体报错为:`maven-compiler-plugin:3.13.0`要求Maven版本至少为3.6.3。解决方案是将Maven版本升级到3.6.3或降低插件版本。本文详细介绍了如何下载、解压并配置Maven 3.6.3,包括环境变量设置和IDEA中的Maven配置,确保项目顺利编译。
8666 4
Maven编译报错:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.13.0:compile 解决方案
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...
这篇文章介绍了在Vue 2项目中如何通过`v-viewer`插件实现图片的预览、切换、缩放、旋转等功能,并提供了插件的安装、配置和使用方法。
2841 0
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...
layui实现选项卡(万字博客!!!)
layui实现选项卡(万字博客!!!)
222 0
Android12 开始推送 Beta2,新增隐私控制面板
Android12 开始推送 Beta2,新增隐私控制面板
109 0
string类练习题
string类练习题
107 1
Spring杂谈 | 你真的了解泛型吗?从java的Type到Spring的ResolvableType(1)
Spring杂谈 | 你真的了解泛型吗?从java的Type到Spring的ResolvableType(1)
341 1
Spring杂谈 | 你真的了解泛型吗?从java的Type到Spring的ResolvableType(1)
DMBOK 读书笔记系列 元数据
元数据最常见的定义是:关于数据的数据。元数据的信息范围很广,不仅包括技术和业务流程、数据规则和约束,还包括逻辑数据结构与物理数据结构等。
DMBOK 读书笔记系列 元数据
【DSW Gallery】Jupyter简介
JupyterNotebook是一个用于编写Jupyter Notebook的Python环境。本文介绍Jupyter Notebook的常用使用技巧,包括shell命令,测试运行时间等使用方法。
【DSW Gallery】Jupyter简介
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问