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表单自定义验证规则
287 0
|
JavaScript
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
3469 0
VUE element-ui之form表单自定义验证11位手机号码(封装验证规则)
|
4月前
ElementUI——表单使用自定义验证导致无法提交
ElementUI——表单使用自定义验证导致无法提交
32 2
|
7月前
|
SQL 安全 测试技术
|
前端开发
ant design form表单验证问题
ant design form表单验证问题
88 0
Ant Design 中表单内容如何设置,更改,回显功能写法
Ant Design 中表单内容如何设置,更改,回显功能写法
261 0
|
前端开发
#yyds干货盘点 ant design form表单验证问题
#yyds干货盘点 ant design form表单验证问题
71 0
#yyds干货盘点 ant design form表单验证问题
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
92 0
|
前端开发
#yyds干货盘点# 【React工作记录二十五】ant design form表单验证问题
#yyds干货盘点# 【React工作记录二十五】ant design form表单验证问题
101 0
#yyds干货盘点# 【React工作记录二十五】ant design form表单验证问题