感谢大神的提醒,是我做的不好, 现在重新梳理一下:
我写的代码
主要功能是对form表单的用户进行校验操作
const { DatePicker } = antd;
const { Button, Form, Input } = antd;
const createForm = Form.create;
const FormItem = Form.Item;
function noop() {
return false;
}
let BasicDemo = React.createClass({
handleReset(e) {
e.preventDefault();
this.props.form.resetFields();
},
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((errors, values) => {
if (!!errors) {
console.log('Errors in form!!!');
return;
}
console.log('Submit!!!');
console.log(values);
});
},
userExists(rule, value, callback) {
if (!value) {
callback();
} else {
$.post("http://testajax.com", function(){
callback();
});
}
},
render() {
const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
const nameProps = getFieldProps('name', {
rules: [
{ required: true, min: 5, message: '用户名至少为 5 个字符' },
{ validator: this.userExists },
],
});
const formItemLayout = {
labelCol: { span: 7 },
wrapperCol: { span: 12 },
};
return (
{...formItemLayout}
label="用户名"
hasFeedback
help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}
>
确定
重置
);
},
});
BasicDemo = createForm()(BasicDemo);
ReactDOM.render(, document.getElementById("container"));
我期待的结果
先对name字段做必填与长度校验,当符合后在进行服务端的远程校验
实际情况
对name字段做必填与长度校验,不符合的情况向服务端远程校验,所以现在我需要增加代码:
userExists(rule, value, callback) {
if (!value) {
callback();
} else {
// 增加的代码
if(value.length < 5){
callback();
return;
}
$.post("http://testajax.com", function(){
callback();
});
}
},
可重现的在线演示
希望
希望增加代码的部分不用写,因为在 rule 规则里已经定义了,想要减少这里的重复工作 @