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

rockswang
  • 1.4k

一些比较复杂的验证逻辑,感觉用正则表达式搞不定,如何自定义验证方法?
官网文档里面说要参考async-validate库的规则,但是今天研究了半天还是没弄明白,请高人给解释一下,多谢了!

回复
阅读 16.7k
2 个回答
✓ 已被采纳

看了下rc-form的源码,自己解决了。
rules数组里面的元素可以是方法,具体参数见下面源码。
我的目的是验证多重选择框中,确保每一个元素都是个数字。正则比较low,不要在意。

        <FormItem {...formItemProps}>{
          this.props.form.getFieldDecorator("args", {
            initialValue: value || [],
            rules: [
              (rule, value, callback, source, options) => {
                const errors = []
                value.every(v => {
                  if (!/^-?[0-9.]+$/.test(v)) {
                    errors.push(new Error(v + '不是合法数值', rule.field))
                    return false
                  }
                  return true
                })
                callback(errors)
              }
            ]
          })(<Select size="default" tags tokenSeparators={[',', ' ', ';']}></Select>)
        }</FormItem>

请仔细看文档
https://ant.design/components...
有提供专门的validator属性自定义检验
<FormItem
{...formItemLayout}
label="Confirm Password"

{getFieldDecorator('confirm', {
rules: [{
  required: true, message: 'Please confirm your password!',
}, {
  validator: this.compareToFirstPassword,
}],

})(

<Input type="password" onBlur={this.handleConfirmBlur} />

)}
</FormItem>

compareToFirstPassword = (rule, value, callback) => {

const form = this.props.form;
if (value && value !== form.getFieldValue('password')) {
  callback('Two passwords that you enter is inconsistent!');
} else {
  callback();
}

}

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏