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>
相关文章
|
2天前
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
52 0
|
7月前
|
JavaScript 前端开发 数据安全/隐私保护
Javascript知识【validation插件重写表单注册校验】
Javascript知识【validation插件重写表单注册校验】
深入掌握ant-design的form异步校验(一)
本文适合对ant-design的表单校验感兴趣的小伙伴阅读~
|
2天前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
12 0
|
6月前
|
小程序 前端开发 JavaScript
小程序提交form表单
微信小程序提交form表单内容
57 0
|
9月前
Ant Design 中表单内容如何设置,更改,回显功能写法
Ant Design 中表单内容如何设置,更改,回显功能写法
93 0
|
9月前
|
前端开发
ant design form表单验证问题
ant design form表单验证问题
64 0
|
11月前
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
52 0
|
12月前
|
前端开发
#yyds干货盘点 ant design form表单验证问题
#yyds干货盘点 ant design form表单验证问题
48 0
#yyds干货盘点 ant design form表单验证问题