diff --git a/components/validation/demo/multiple-select.md b/components/validation/demo/multiple-select.md new file mode 100644 index 0000000000..e26bac88cf --- /dev/null +++ b/components/validation/demo/multiple-select.md @@ -0,0 +1,113 @@ +# 多选 Select + +- order: 2 + +多选 Select 的校验例子。 + +--- + +````jsx +var Validation = antd.Validation; +var Validator = Validation.Validator; +var Select = antd.Select; +var Option = Select.Option; +var Button = antd.Button; + +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, ' '); + } +} + +var Form = React.createClass({ + mixins: [Validation.FieldMixin], + + getInitialState() { + return { + status: { + select: {} + }, + formData: { + select: undefined + } + }; + }, + + handleSubmit(e) { + e.preventDefault(); + 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); + }); + }, + + handleReset(e) { + this.refs.validation.reset(); + this.setState(this.getInitialState()); + e.preventDefault(); + }, + + 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; + }, + + render() { + var formData = this.state.formData; + var status = this.state.status; + + return ( +
+ +
+ +
+
+ + + + {status.select.errors ?
{status.select.errors.join(',')}
: null} +
+
+
+ +
+
+ +     + +
+
+
+
+ ); + } +}); + +ReactDOM.render(
, document.getElementById('components-validation-demo-multiple-select')); +````