antd 不用form onsubmit 如何完成必填项的校验

antd 不用form onsubmit 如何完成必填项的校验

 

需求: 需要对一个给用户打分文本表单,增加非空校验。正常情况下是(官方文档推荐方法),创建一个form 表单。 然后通过onsubmit进行提交。  但是我的是一个table来组成的表单。并且行数是动态的。  类似如下图:

<input/><input/>
<input/><input/>
     :     :

 所以:创建<form>表单来进行,数据非空校验明显不太现实:

然后求助百度。。。。

   有一篇:https://segmentfault.com/q/1010000012884210 感觉靠谱:就尝试了一下。发现能实现我的需求:

  code:

   

function a (e){
    e.preventDefault();//***
    this.props.form.validateFields((err) => {//***
          if (err) {
             // 校验不通过  
             return;
          }else{
            // TODO 校验通过     
          }
 }

这种方式的好处是,只要你申明了

<FormItem>
                {getFieldDecorator(`thinkDoMark${row.id}`, {
                  initialValue :text,
                  rules: [{
                    required: true, message: '请输入分数!',
                  }],
                  onChange: (e) => self.changeScore(e, `thinkDoMark-${row.id}`)
                })(
                  <InputNumber min={0} max={3} step={0.1} precision={1} placeholder="0-3分"  />
                )}
              </FormItem>

 

 

可以不用创建form 表单就可以 直接对rules 规则进行校验。


版权声明:本文为qq_27727251原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。