ant 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>

参考 ：

antDesign-API
React 表单验证-validator
react 邮箱验证方法
Element UI 中对 Form 表单验证的使用介绍-VUE
react 中使用正则验证 input 邮箱格式
antd form 表单邮箱校验-rules