Form.getFieldDecorator里面的rules可否用自定义方法来进行validate

1.使用getFieldDecorator的rules规则

最简单的方法就是使用getFieldDecorator中的rules验证。rules中定义校验规则,message为校验不通过时的提示文字。

{getFieldDecorator('inputContent', {
            rules: [{
              required: true, 
              message: '请输入内容!',
            }],
          })(
            <Input />
)}
  • rules校验规则

参数说明类型默认值 
enum枚举类型string- 
len字段长度number- 
max最大长度number- 
message校验文案stringReactNode 
min最小长度number- 
pattern正则表达式校验RegExp- 
required是否必选booleanfalse 
transform校验前转换字段值function(value) => transformedValue:any- 
type内建校验类型,可选项string'string' 
validator自定义校验(注意,callback 必须被调用function(rule, value, callback)- 
whitespace必选时,空格是否会被视为错误booleanfalse 

 

2.使用getFieldDecorator的validator自定义校验

validator可以自定义校验规则,适用于无法用rules校验规则校验的情况,比如校验再次输入密码与前一次输入的密码是否相同。其中,参数val为输入的值,callback必须被调用,是校验失败时的回调,内容为提示文字。

handleValidator = (rule, val, callback) => {
        if (!val) {
            callback();
        }
        let validateResult = ...;  // 自定义规则
        if (!validateResult) {
            callback('请输入正确的内容!');
        }
        callback();
    }
{getFieldDecorator('validator', {
    rules: [{
        required: true,
        message: '请输入内容'
    }, {
        validator: this.handleValidator
    }]
})(
    <input />
)}


注意:一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child,当有多个被装饰过的 child 时,help required validateStatus 无法自动生成。此时可用下面一种方法校验。

3.使用validateStatus自定义校验

antd提供了validateStatus,help,hasFeedback 等属性,你可以不需要使用 Form.create 和 getFieldDecorator,自己定义校验的时机和内容。

  • validateStatus: 校验状态,可选 'success', 'warning', 'error', 'validating'。
  • hasFeedback:用于给输入框添加反馈图标。
  • help:设置校验文案。
<FormItem
      {...formItemLayout}
      label="Success"
      hasFeedback
      validateStatus="success"
    >
      <Input placeholder="I'm the content" id="success" />
</FormItem>

<FormItem
      {...formItemLayout}
      label="Warning"
      hasFeedback
      validateStatus="warning"
    >
      <Input placeholder="Warning" id="warning" />
</FormItem>

<FormItem
      {...formItemLayout}
      label="Fail"
      hasFeedback
      validateStatus="error"
      help="Should be combination of numbers & alphabets"
    >
      <Input placeholder="unavailable choice" id="error" />
</FormItem>

ä¸ç§æ ¡éªç¶æ

  • 可用属性
参数说明类型默认值 
colon配合 label 属性使用,表示是否显示 label 后面的冒号booleantrue 
extra额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。stringReactNode 
hasFeedback配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用booleanfalse 
help提示信息,如不设置,则会根据校验规则自动生成stringReactNode 
labellabel 标签的文本stringReactNode 
labelCollabel 标签布局,同 <Col>组件,设置 span``offset值,如 {span: 3, offset: 12}或 sm: {span: 3, offset: 12}object  
required是否必填,如不设置,则会根据校验规则自动生成booleanfalse 
validateStatus校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating'string  
wrapperCol需要为输入控件设置布局样式时,使用该属性,用法同 labelCol   
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值