antd中表单校验正则使用方式

最新推荐文章于 2024-07-26 17:02:42 发布

蓝枫秋千

最新推荐文章于 2024-07-26 17:02:42 发布

阅读量6.2k

点赞数 2

分类专栏：前端 antd

本文链接：https://blog.csdn.net/qq_43382853/article/details/103985939

版权

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

antd

8 篇文章 0 订阅

订阅专栏

类组件的结构(最外层需要先包裹一层语法糖)

const PersonManagement  = Form.create()(
  class extends React.Component{}
 )
 epxort default PersonManagement

从form中解构出需要的一些方法

const { getFieldDecorator } = this.props.form;

表单项的编写

<Form.Item label="姓名" >
  {getFieldDecorator("name", {
    rules: checkRules('null')
  })(
    <Input
      placeholder="请输入姓名"
      onChange={e =>
        this.inputOnChange("name", e.target.value)
      }
    />
  )}
</Form.Item>

这里的rules的值是一个对象,我是做了一遍封装(封装了几种常用的表单校验的方式)

export const checkRules = (type: string) => {
    switch(type) {
        case 'telPhone' :
            return ([{ 
                required: true, 
                pattern: /^1[34578]\d{9}$/,
                message: '手机号格式不正确'
              }])
        case 'idCard' :
            return ([{ 
                required: true, 
                pattern: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
                message: '身份证格式不正确',
            }])
        case 'creditCode' :
            return ([{
                required: true,
                message: '税号长度必须是18位',
                len: 18
            }])
        case 'null' :
            return ([{
                required: true,
                message: '你的输入为空',
            }])
        case 'number' :
            return ([{
                required: true,
                pattern: /^\+?[1-9][0-9]*$/,
                message: '请输入正确的数字'
            }])
        case 'name' :
            return ([{
                required: true,
                pattern: /^[\u2E80-\u9FFF]+$/,
                message: '请输入汉字姓名'
            }])
        default :
            return;
    }
}