Ant design pro常用(6):常用的Form.Item

电话号码

<Form.Item  label='联系方式' name='telephone' 
         rules={[
              {required:true,message:'请输入联系方式'},
               {pattern:/^1(3|4|5|6|7|8|9)\d{9}$/,message:'电话号码格式不正确'}
          ]}>
            <Input placeholder='联系方式' maxLength={11}/>
</Form.Item>

邮箱

<Form.Item 
	label='邮箱'
	 name='email' 
	rules={[{pattern:/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,message:'邮箱格式不确'}]}>
     <Input placeholder='邮箱'/>
</Form.Item>

常见问题

 `callback` is deprecated. Please return a promise instead.

原因 :
新版的antd使用了React的hooks，表单中的字段效验方法进行了一些修改。原来的回调方法改成返回一个Promise对象

原来写法
const validatorMobile =(rule,value,callback)=> {
  try{
    if(!value){
      callback('请输入用户名')
    }else if(value.length <= 0 || value.length>11){
      callback('请输入正确的位数')
    }else if(!checkMobile(value)){
      callback('电话号码格式不正确')
    }else{
      callback()
    }
  }catch(err){
    callback(err)
  }

}

改后写法：
const validatorMobile =(rule,value,callback)=> {
  if(!value){
    return Promise.reject('请输入用户名')
  }else if(value.length <= 0 || value.length>11){
    return Promise.reject('请输入正确的位数')
  }else if(!checkMobile(value)){
    return Promise.reject('电话号码格式不正确')
  }else{
    return Promise.resolve()
  }

}