react ant From 实时验证 和 提交时统一验证
一、表单提交时 统一验证
思路：首先form的item上有自己的onchange验证事件，通常都是 数字、非空、长度 等ant 内置验证规则，第二种方法 是添加这种自定义 规则
单机事件中使用 validateFields(errors, values) 内置方法，会获取到form中已有验证的错误和值。然后在中写自己的 验证方法。最后统一判断。
思路比较清晰简单，但是写的时候来回倒腾，费了好大劲，记录
提交时验证代码：
validateFields((errors, values) myForm.validateFields((errors, values) => {let flag = true;//验证sql的可执行性let SQL = values.SQL;let Code = values.Code;auth.Ajax("/check/checkSQL", { SQL: SQL, Code: Code }, function (res) {console.log(res);if (res.result == '1') { //返回正常参数flag = false;myForm.setFields({ //设置验证返回错误SQL: {value: SQL,errors: [new Error(res.data)],},});}else{flag = true ;myForm.setFields({ //设置删除上一次错误信息SQL: {value: SQL,errors: null,},});}});if (errors || !flag) {console.log('Errors in form!!!');return;}else{console.log('No Errors in form!!!');}
二、单个item 实时验证，相当于onchange时间中些方法
特点：实时验证，只要该字段一改变就会调用这个方法。
定义的验证方法
checkConfirm(rule, value, callback) {auth.ajax("/briefing/checkSQL", { SQL: value, Code: "DS" }, function (res) {if (res.result == '1') {console.log("set error");callback("SQL错误，请修改！");}});callback();}在 item中定义这个规则 { validator: this.checkConfirm }
{getFieldDecorator('SQL', {rules:[{ required: true, message: '简报时机必须选择', }, { validator: this.checkConfirm }], initialValue: this.state.data.SQL})( {minRows: 2, maxRows: 6}} disabled={(isDisabled)} />)}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！