--- order: 11 title: zh-CN: 表单校验 en-US: Basic validate --- ## zh-CN 基本的表单校验例子。 ## en-US Basic validatation for form. ````jsx import { Button, Form, Input } from 'antd'; const createForm = Form.create; const FormItem = Form.Item; function noop() { return false; } let BasicDemo = React.createClass({ handleReset(e) { e.preventDefault(); this.props.form.resetFields(); }, handleSubmit(e) { e.preventDefault(); this.props.form.validateFields((errors, values) => { if (!!errors) { console.log('Errors in form!!!'); return; } console.log('Submit!!!'); console.log(values); }); }, userExists(rule, value, callback) { if (!value) { callback(); } else { setTimeout(() => { if (value === 'JasonWood') { callback([new Error('Sorry, the user name is already in use.')]); } else { callback(); } }, 800); } }, checkPass(rule, value, callback) { const { validateFields } = this.props.form; if (value) { validateFields(['rePasswd'], { force: true }); } callback(); }, checkPass2(rule, value, callback) { const { getFieldValue } = this.props.form; if (value && value !== getFieldValue('passwd')) { callback('The two passwords you enter is inconsistent!'); } else { callback(); } }, render() { const { getFieldProps, getFieldError, isFieldValidating } = this.props.form; const nameProps = getFieldProps('name', { rules: [ { required: true, min: 5, message: 'User name for at least 5 characters' }, { validator: this.userExists }, ], }); const emailProps = getFieldProps('email', { validate: [{ rules: [ { required: true }, ], trigger: 'onBlur', }, { rules: [ { type: 'email', message: 'Please input the correct email' }, ], trigger: ['onBlur', 'onChange'], }], }); const passwdProps = getFieldProps('passwd', { rules: [ { required: true, whitespace: true, message: 'Please enter your password' }, { validator: this.checkPass }, ], }); const rePasswdProps = getFieldProps('rePasswd', { rules: [{ required: true, whitespace: true, message: 'Please confirm your password', }, { validator: this.checkPass2, }], }); const textareaProps = getFieldProps('textarea', { rules: [ { required: true, message: 'Really not supposed to write something?' }, ], }); const formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 12 }, }; return (
); }, }); BasicDemo = createForm()(BasicDemo); ReactDOM.render(