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版权协议,转载请附上原文出处链接和本声明。