首页 > 技术文章 > 关于antd的表单验证

marvelousone 2019-07-19 22:03 原文

有时候验证不了,可能需要加上submitting

const {
     form: { getFieldDecorator },
     submitting,
   } = this.props;
<Button type="primary" htmlType="submit" onSubmit={this.submit} loading={submitting} >

有时候发现验证不生效,点击了提交但是没反应。
原因是自定义验证规则写错了。

{
    getFieldDecorator('contactPhone', {
        initialValue: baseInfo.contactPhone,
        rules: [
           {
               required: true,
                message: '联系人手机为必填项' 
           },
           { validator: this.checkPhoneNub }//自定义检验
        ],
    })(
    <Input 
        style={{width:220}} 
        autoComplete="off"
    ></Input>
    )
}    

下面是自定义验证规则

checkPhoneNub(rule, value, callback) {
    var regu = "^1[0-9]{10}$";//手机号码验证regEx:第一位数字必须是1,11位数字
    var re = new RegExp(regu);
    if ( re.test(value)) {
      callback();
    }else {
        callback('请正确输入手机号!');
    }
  }      

推荐阅读