ant-design/components/form/demo/validate-basic.md

表单校验

• order: 11

基本的表单校验例子。

---

import { Button, Form, Input } from 'antd';
const createForm = Form.create;
const FormItem = Form.Item;

function noop() {
  return false;
}

class BasicDemo extends React.Component {
  getValidateStatus(field) {
    const { isFieldValidating, getFieldError, getFieldValue } = this.props.form;

    if (isFieldValidating(field)) {
      return 'validating';
    } else if (!!getFieldError(field)) {
      return 'error';
    } else if (getFieldValue(field)) {
      return 'success';
    }
  }

  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('抱歉，该用户名已被占用。')]);
        } else {
          callback();
        }
      }, 800);
    }
  }

  checkPass(rule, value, callback) {
    const { validateFields } = this.props.form;
    if (value) {
      validateFields(['rePasswd']);
    }
    callback();
  }

  checkPass2(rule, value, callback) {
    const { getFieldValue } = this.props.form;
    if (value && value !== getFieldValue('passwd')) {
      callback('两次输入密码不一致！');
    } else {
      callback();
    }
  }

  render() {
    const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;

    return (
      <Form horizontal form={this.props.form}>
        <FormItem
          label="用户名："
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 12 }}
          hasFeedback
          help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
          <Input placeholder="实时校验，输入 JasonWood 看看"
            {...getFieldProps('name', {
              rules: [
                { required: true, min: 5, message: '用户名至少为 5 个字符' },
                { validator: this.userExists },
              ],
            })} />
        </FormItem>

        <FormItem
          label="邮箱："
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 12 }}
          hasFeedback>
          <Input type="email" placeholder="onBlur 与 onChange 相结合"
            {...getFieldProps('email', {
              validate: [{
                rules: [
                  { required: true },
                ],
                trigger: 'onBlur',
              }, {
                rules: [
                  { type: 'email', message: '请输入正确的邮箱地址' },
                ],
                trigger: ['onBlur', 'onChange'],
              }]
            })} />
        </FormItem>

        <FormItem
          label="密码："
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 12 }}
          hasFeedback>
          <Input type="password" autoComplete="off"
            {...getFieldProps('passwd', {
              rules: [
                { required: true, whitespace: true, message: '请填写密码' },
                { validator: this.checkPass.bind(this) },
              ],
            })}
            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
        </FormItem>

        <FormItem
          label="确认密码："
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 12 }}
          hasFeedback>
          <Input type="password" autoComplete="off" placeholder="两次输入密码保持一致"
            onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
            {...getFieldProps('rePasswd', {
              rules: [{
                required: true,
                whitespace: true,
                message: '请再次输入密码',
              }, {
                validator: this.checkPass2.bind(this),
              }],
            })} />
        </FormItem>

        <FormItem
          label="备注："
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 12 }}>
          <Input type="textarea" placeholder="随便写" id="textarea" name="textarea"
            {...getFieldProps('textarea', {
              rules: [
                { required: true, message: '真的不打算写点什么吗？' },
              ],
            })} />
        </FormItem>

        <FormItem wrapperCol={{ span: 12, offset: 7 }} >
        <Button type="primary" onClick={this.handleSubmit.bind(this)}>确定</Button>
          &nbsp;&nbsp;&nbsp;
        <Button type="ghost" onClick={this.handleReset.bind(this)}>重置</Button>
        </FormItem>
      </Form>
    );
  }
}

BasicDemo = createForm()(BasicDemo);

ReactDOM.render(<BasicDemo />, mountNode);