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>
相关文章
|
7月前
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
276 0
|
JavaScript 前端开发 数据安全/隐私保护
Javascript知识【validation插件重写表单注册校验】
Javascript知识【validation插件重写表单注册校验】
深入掌握ant-design的form异步校验(一)
本文适合对ant-design的表单校验感兴趣的小伙伴阅读~
|
3月前
|
前端开发
antd_使用Input封装实现Form校验效果(最终版)
本文介绍了在Ant Design (antd)框架中如何封装Input组件以实现表单校验效果,并提供了封装代码示例以及如何在提交时进行校验。
78 4
antd_使用Input封装实现Form校验效果(最终版)
|
4月前
ElementUI——表单使用自定义验证导致无法提交
ElementUI——表单使用自定义验证导致无法提交
28 2
|
前端开发
ant design form表单验证问题
ant design form表单验证问题
84 0
Ant Design 中表单内容如何设置,更改,回显功能写法
Ant Design 中表单内容如何设置,更改,回显功能写法
251 0
|
前端开发
#yyds干货盘点 ant design form表单验证问题
#yyds干货盘点 ant design form表单验证问题
69 0
#yyds干货盘点 ant design form表单验证问题
Yii2.0框架中如何进行表单验证?有哪些内置的验证器?
Yii2.0框架中如何进行表单验证?有哪些内置的验证器?
162 0