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>
相关文章
ant-design Upload上传组件使用 编辑功能图片回显
ant-design Upload上传组件使用 编辑功能图片回显
1245 0
|
24天前
|
人工智能 移动开发 JavaScript
类似ant design和element ui的八大Vue的UI框架详解优雅草卓伊凡
类似ant design和element ui的八大Vue的UI框架详解优雅草卓伊凡
329 3
|
JSON 数据格式 容器
Layui 内置方法 - layer.photos(相册层)
Layui 内置方法 - layer.photos(相册层)
1960 0
|
4月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
391 17
|
Web App开发 前端开发 JavaScript
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
311 0
|
11月前
ThreeJs通过射线获取自己的点击位置坐标
这篇文章详细说明了如何使用Three.js来绘制线条,包括创建线几何体、设置材质以及将线条添加到3D场景中的具体步骤。
418 1
ThreeJs通过射线获取自己的点击位置坐标
|
6月前
|
安全 Linux 开发工具
【小白必看】GitKraken超详细图文安装教程(附官方下载链接)
GitKraken 是一款跨平台的 Git 客户端,提供直观界面简化版本控制。支持 Windows、Mac 和 Linux,适合个人与团队使用。本文详细介绍其下载、安装流程及配置方法,包括语言设置、Git 配置、多分支管理等功能,并解答常见问题,助你高效管理代码仓库。
|
9月前
|
数据库 索引
索引命名规范
本文介绍了数据库中不同类型的索引命名规则:主键索引命名为pk_字段名,唯一索引命名为uk_字段名,普通索引命名为idx_字段名。pk表示主键,uk表示唯一键,idx表示索引。
713 7
|
JavaScript
Vue3分段控制器(Segmented)
这是一个基于 Vue 的分段控制器组件 `Segmented`,支持多种选项和自定义渲染。通过 `v-model` 绑定当前选中值,并提供 `block`、`disabled` 和 `size` 等属性来调整样式。
388 0
Vue3分段控制器(Segmented)