diff --git a/components/form/demo/validate-basic.md b/components/form/demo/validate-basic.md index 339cff3e0a..24a21286cf 100644 --- a/components/form/demo/validate-basic.md +++ b/components/form/demo/validate-basic.md @@ -78,94 +78,92 @@ class BasicDemo extends React.Component { render() { const { getFieldProps, getFieldError, isFieldValidating } = this.props.form; - + const nameProps = getFieldProps('name', { + rules: [ + { required: true, min: 5, message: '用户名至少为 5 个字符' }, + { validator: this.userExists }, + ], + }); + const emailProps = getFieldProps('email', { + validate: [{ + rules: [ + { required: true }, + ], + trigger: 'onBlur', + }, { + rules: [ + { type: 'email', message: '请输入正确的邮箱地址' }, + ], + trigger: ['onBlur', 'onChange'], + }] + }); + const passwdProps = getFieldProps('passwd', { + rules: [ + { required: true, whitespace: true, message: '请填写密码' }, + { validator: this.checkPass.bind(this) }, + ], + }); + const rePasswdProps = getFieldProps('rePasswd', { + rules: [{ + required: true, + whitespace: true, + message: '请再次输入密码', + }, { + validator: this.checkPass2.bind(this), + }], + }); + const textareaProps = getFieldProps('textarea', { + rules: [ + { required: true, message: '真的不打算写点什么吗?' }, + ], + }); + const formItemLayout = { + labelCol: { span: 7 }, + wrapperCol: { span: 12 }, + }; return (
- + - + - - + - + {...formItemLayout} + label="备注:"> + - - + +     - + ); diff --git a/components/form/demo/validate-customized.md b/components/form/demo/validate-customized.md index 9f5e3e23e9..d93b7b6cf2 100644 --- a/components/form/demo/validate-customized.md +++ b/components/form/demo/validate-customized.md @@ -143,6 +143,10 @@ let Demo = React.createClass({ validator: this.checkPass2, }], }); + const formItemLayout = { + labelCol: { span: 6 }, + wrapperCol: { span: 18 }, + }; return (
@@ -151,9 +155,8 @@ let Demo = React.createClass({ + {...formItemLayout} + label="密码:"> @@ -167,9 +170,8 @@ let Demo = React.createClass({ + {...formItemLayout} + label="确认密码:"> diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index 02c0d3b6cd..68c0240720 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -65,19 +65,48 @@ let Demo = React.createClass({ }], }]; const { getFieldProps } = this.props.form; + const selectProps = getFieldProps('select', { + rules: [ + { required: true, message: '请选择您的国籍' } + ], + }); + const multiSelectProps = getFieldProps('multiSelect', { + rules: [ + { required: true, message: '请选择您喜欢的颜色', type: 'array' }, + ] + }); + const radioProps = getFieldProps('radio', { + rules: [ + { required: true, message: '请选择您的性别' } + ] + }); + const birthdayProps = getFieldProps('birthday', { + rules: [ + { + required: true, + type: 'date', + message: '你的生日是什么呢?', + }, { + validator: this.checkBirthday, + } + ] + }); + const primeNumberProps = getFieldProps('primeNumber', { + rules: [{ validator: this.checkPrime }], + }); + const addressProps = getFieldProps('address', { + rules: [{ required: true, type: 'array' }], + }); + const formItemLayout = { + labelCol: { span: 7 }, + wrapperCol: { span: 12 }, + }; return (
- @@ -87,16 +116,9 @@ let Demo = React.createClass({ - @@ -106,25 +128,17 @@ let Demo = React.createClass({ - + {...formItemLayout} + label="性别:"> + + {...formItemLayout} + label="兴趣爱好:"> 吃饭饭   @@ -137,44 +151,21 @@ let Demo = React.createClass({ - + {...formItemLayout} + label="生日:"> + - + {...formItemLayout} + label="8~12间的质数:"> + - + {...formItemLayout} + label="选择地址:"> +