diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md index fab6ffd619..61dfceb436 100644 --- a/components/validation/demo/basic.md +++ b/components/validation/demo/basic.md @@ -1,21 +1,18 @@ -# 基本 +# Input 表单域 - order: 0 基本的表单校验例子。 -每个表单域要声明 `name` 属性作为校验的标识，可通过其 `isValidating`、`errors` 属性判断是否处于校验中、是否校验不通过状态，具体可参见 **用户名** 校验。 +**每个表单域要声明 `name` 属性作为校验的标识**，可通过其 `isValidating`、`errors` 属性判断是否处于校验中、是否校验不通过状态，具体可参见 **用户名** 校验。 表单提交的时候，通过 Validation 的 validate 方法判断是否所有表单域校验通过（isValid 会作为回调函数的参数传入）。 --- ````jsx - -import {Validation, Select, Radio, Button, Datepicker, InputNumber, Form, Input} from 'antd'; +import {Validation, Button, Form, Input} from 'antd'; const Validator = Validation.Validator; -const Option = Select.Option; -const RadioGroup = Radio.Group; const FormItem = Form.Item; function cx(classNames) { @@ -40,24 +37,16 @@ const Demo = React.createClass({ status: { email: {}, name: {}, - select: {}, - radio: {}, passwd: {}, rePasswd: {}, - textarea: {}, - birthday: {}, - primeNumber: {} + textarea: {} }, formData: { email: undefined, name: undefined, - select: undefined, - radio: undefined, passwd: undefined, rePasswd: undefined, - textarea: undefined, - birthday: undefined, - primeNumber: 9 + textarea: undefined }, isEmailOver: false, // email 是否输入完毕 emailValidateMethod: 'onBlur' // 用于改变 email 的验证方法 @@ -144,22 +133,6 @@ const Demo = React.createClass({ } }, - 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() { const formData = this.state.formData; const status = this.state.status; @@ -195,41 +168,6 @@ const Demo = React.createClass({ - - - - - - - - - - 男 - 女 - - - - - - - - - - - - - - - - { - 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')); -```` diff --git a/components/validation/demo/other-items.md b/components/validation/demo/other-items.md new file mode 100644 index 0000000000..05db498411 --- /dev/null +++ b/components/validation/demo/other-items.md @@ -0,0 +1,209 @@ +# 其他表单域校验 + +- order: 1 + +提供以下组件表单域的校验。 + +`Select` `Radio` `Datepicker` `InputNumber`。 + +--- + +````jsx +import {Validation, Select, Radio, Button, Datepicker, InputNumber, Form} from 'antd'; +const Validator = Validation.Validator; +const Option = Select.Option; +const RadioGroup = Radio.Group; +const FormItem = Form.Item; + +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; +} + +const Demo = React.createClass({ + mixins: [Validation.FieldMixin], + + getInitialState() { + return { + status: { + select: {}, + multiSelect: {}, + radio: {}, + birthday: {}, + primeNumber: {} + }, + formData: { + select: undefined, + multiSelect: undefined, + radio: undefined, + birthday: undefined, + primeNumber: 9 + } + }; + }, + + renderValidateStyle(item) { + const formData = this.state.formData; + const status = this.state.status; + + const classes = cx({ + 'error': status[item].errors, + 'validating': status[item].isValidating, + 'success': formData[item] && !status[item].errors && !status[item].isValidating + }); + + return classes; + }, + + handleReset(e) { + this.refs.validation.reset(); + this.setState(this.getInitialState()); + e.preventDefault(); + }, + + handleSubmit(e) { + e.preventDefault(); + this.setState({ + isEmailOver: true + }); + const validation = this.refs.validation; + validation.validate((valid) => { + if (!valid) { + console.log('error in form'); + return; + } else { + console.log('submit'); + } + console.log(this.state.formData); + }); + }, + + 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() { + const formData = this.state.formData; + const status = this.state.status; + + return ( + + + + + + + + + + + + + + + + + + 男 + 女 + + + + + + + + + + + + + + + + + + +     + + + +
+ ); + } +}); + +ReactDOM.render(, document.getElementById('components-validation-demo-other-items')); +````