diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md index 82b3a26b05..839ea8b59e 100644 --- a/components/validation/demo/basic.md +++ b/components/validation/demo/basic.md @@ -2,9 +2,9 @@ - order: 0 -基本的表单校验栗子。 +基本的表单校验例子。 -每个表单域要声明 `name` 属性作为校验的标识,可通过其 `isValidating` `errors` 属性判断是否处于校验中、是否校验不通过状态,具体可参见 **用户名** 校验。 +每个表单域要声明 `name` 属性作为校验的标识,可通过其 `isValidating`、`errors` 属性判断是否处于校验中、是否校验不通过状态,具体可参见 **用户名** 校验。 表单提交的时候,通过 Validation 的 validate 方法判断是否所有表单域校验通过(isValid 会作为回调函数的参数传入)。 @@ -50,7 +50,9 @@ var Form = React.createClass({ passwd: undefined, rePasswd: undefined, textarea: undefined - } + }, + isEmailOver: false, // email 是否输入完毕 + emailValidateMethod: 'onBlur' // 用于改变 email 的验证方法 }; }, @@ -68,6 +70,20 @@ var Form = React.createClass({ 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()); @@ -76,6 +92,9 @@ var Form = React.createClass({ handleSubmit(e) { e.preventDefault(); + this.setState({ + isEmailOver: true + }); var validation = this.refs.validation; validation.validate((valid) => { if (!valid) { @@ -98,7 +117,7 @@ var Form = React.createClass({ } else { callback(); } - }, 1000); + }, 800); } }, @@ -122,7 +141,7 @@ var Form = React.createClass({