react ant-design-mobile中表单校验无效的问题
// 表单部分
<form>
<List>
<InputItem
{...getFieldProps('idcard', {
rules: [
{ required: true, message: '请输入身份证号' },
{ validator: this.validateIDcard },
]})}
clear
error={getFieldError('idcard')}
onErrorClick={() => {
// 接收到验证失败的提示,点击错误时展示
Toast.fail(getFieldError('idcard'))
}}
placeholder="持卡人身份证号">身份证号</InputItem>
<InputItem {...getFieldProps('centerno',{
rules: [
{required: true, message: '请输入服务中心编号'},
{validator: this.validateCenterno}
]
})}
clear
error = {getFieldError('centerno')}
onErrorClick = {() => {Toast.fail(getFieldError('centerno'))}}
placeholder="服务中心编号">服务中心</InputItem>
<Item>
<Button type="primary" style ={{backgroundColor: "#FFC105"}} onClick={this.onSubmit}>提交申请</Button>
</Item>
</List>
</form>
校验部分
validateIDcard = (rule, value, callback) => {
if (value.length === 15 || value.length === 18) {
callback();
} else {
// 验证失败 抛出错误,再点击错误按钮时展示
callback(new Error('请输入15或18位的身份证号'));
}
}
validateCenterno = (rule, v, cb) => {
if (v.length >=4 && v.length <= 6) {
cb();
} else {
cb(new Error('请输入4至6位服务中心编号'));
}
}
onSubmit = () => {
this.props.form.validateFields({ force: true }, (error) => {
console.log('submit')
console.log(error)
if (!error) {
console.log(this.props.form.getFieldsValue());
} else {
Toast.fail('输入有误,请检查输入无误后再提交');
}
});
}
现在问题是,正常输入的时候会进行校验
但是在列表全为空的时候点击提交 不会校验, 无反应
在部分输入,校验出错的情况,点击提交 校验部分错误消失, 但是仍然没有错误弹出 不走onSubmit
求大家帮忙看看我是哪里写的有问题嘛?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
提交表单时需要组织表单的默认行为。
题主的代码没问题
楼主解决了么