# 基本 - order: 0 基本的表单校验例子。 每个表单域要声明 `name` 属性作为校验的标识,可通过其 `isValidating`、`errors` 属性判断是否处于校验中、是否校验不通过状态,具体可参见 **用户名** 校验。 表单提交的时候,通过 Validation 的 validate 方法判断是否所有表单域校验通过(isValid 会作为回调函数的参数传入)。 --- ````jsx var Validation = antd.Validation; var Validator = Validation.Validator; var Select = antd.Select; var Option = Select.Option; var Radio = antd.Radio; var RadioGroup = antd.Radio.Group; var Button = antd.Button; var Datepicker = antd.Datepicker; var InputNumber = antd.InputNumber; var Form = antd.Form; function cx(classNames) { if (typeof classNames === 'object') { return Object.keys(classNames).filter(function(className) { return classNames[className]; }).join(' '); } else { return Array.prototype.join.call(arguments, ' '); } } function noop() { return false; } var Demo = React.createClass({ mixins: [Validation.FieldMixin], getInitialState() { return { status: { email: {}, name: {}, select: {}, radio: {}, passwd: {}, rePasswd: {}, textarea: {}, birthday: {}, primeNumber: {} }, formData: { email: undefined, name: undefined, select: undefined, radio: undefined, passwd: undefined, rePasswd: undefined, textarea: undefined, birthday: undefined, primeNumber: 9 }, isEmailOver: false, // email 是否输入完毕 emailValidateMethod: 'onBlur' // 用于改变 email 的验证方法 }; }, renderValidateStyle(item, hasFeedback=true) { var formData = this.state.formData; var status = this.state.status; var classes = cx({ 'has-feedback': hasFeedback, 'has-error': status[item].errors, 'is-validating': status[item].isValidating, 'has-success': formData[item] && !status[item].errors && !status[item].isValidating }); return classes; }, handleEmailInputBlur() { this.setState({ isEmailOver: true }); }, handleEmailInputFocus() { if (this.state.isEmailOver) { this.setState({ emailValidateMethod: 'onChange' }); } }, handleReset(e) { this.refs.validation.reset(); this.setState(this.getInitialState()); e.preventDefault(); }, handleSubmit(e) { e.preventDefault(); this.setState({ isEmailOver: true }); var validation = this.refs.validation; validation.validate((valid) => { if (!valid) { console.log('error in form'); return; } else { console.log('submit'); } console.log(this.state.formData); }); }, userExists(rule, value, callback) { if (!value) { callback(); } else { setTimeout(function () { if (value === 'JasonWood') { callback([new Error('抱歉,该用户名已被占用。')]); } else { callback(); } }, 800); } }, checkPass(rule, value, callback) { if (this.state.formData.passwd) { this.refs.validation.forceValidate(['rePasswd']); } callback(); }, checkPass2(rule, value, callback) { if (value && value !== this.state.formData.passwd) { callback('两次输入密码不一致!'); } else { callback(); } }, checkBirthday(rule, value, callback) { if (value && value.getTime() >= Date.now()){ callback(new Error('你不可能在未来出生吧!')); } else { callback(); } }, checkPrime(rule, value, callback) { if (value !== 11) { callback(new Error('8~12之间的质数明明是11啊!')); } else { callback(); } }, render() { var formData = this.state.formData; var status = this.state.status; return (
); } }); ReactDOM.render(