Form 表单

React 快速验证form

Install

npm install react-form-validates --save

Usage

import React, { Component } from 'react'
import { Picker, Input } from 'zarm';
import Form from 'react-form-validates';

import './App.scss';
import 'zarm/styles/index.scss';
import '~react-form-validates/styles/index.css';

const createForm = Form.create;
const FormItem = Form.Item;

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      certTypeDatas: [
        { value: '0', label: '请选择证件类型' },
        { value: '1', label: '身份证' },
        { value: '2', label: '护照' },
      ]
    };

    this.onSubmit = this.onSubmit.bind(this);
  }
  onSubmit(e) {
    e.preventDefault();

    this.props.form.validateFields((errors, value) => {
      console.log(errors)
      console.log(value)
    })

  }
  render() {
    const { certTypeDatas } = this.state;
    const { getFieldProps } = this.props.form;

    console.log('props', this.props)

    const nameProps = getFieldProps('name', {
      rules: [
        { required: true, message: '用户名至少为 5 个字符' },
        { required: true, min: 5, regexp: /^\d/, message: '用户名至少为 5 个字符' },
      ]
    });

    const certTypeProps = getFieldProps('certType', {
      rules: [
        { required: true, message: '证件类型' },
      ]
    });

    const certNoProps = getFieldProps('certNo', {
      rules: [
        { required: true,  type: 'number', message: '证件号码必须为数字值' },
      ]
    });

    const phoneProps = getFieldProps('phone', {
      rules: [
        { required: true, message: '请输入手机号' },
        { required: true, type: 'isMobile', message: '请输入正确手机号' },
      ]
    });

    const popperProps = getFieldProps('popper', {
      rules: [
        { required: true, message: '支持popper类型的提示框', requiredType: 'popper', classname: 'your_classname' },
      ]
    });

    return (
      <div className="form-wrap">
        <Form onSubmit={this.onSubmit}>
          <FormItem
            label="姓名"
          >
            <Input type="text" {...nameProps} placeholder="请输入姓名" />
          </FormItem>
          <FormItem
            label="证件类型"
          >
            <Picker
              dataSource={ certTypeDatas }
              />
          </FormItem>
          <FormItem
            label="证件号码"
          >
            <Input type="text" {...certNoProps} placeholder="请输入证件号码" />
          </FormItem>
          <FormItem
            label="手机号"
          >
            <Input type="number" {...phoneProps} placeholder="请输入手机号" />
          </FormItem>

          <div className="button-inner">
            <button type="submit" className="button-submit">提交</button>
          </div>
        </Form>
      </div>
    )
  }
}

export default createForm()(App);

API

Form

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------------------------------------------------------| ------- | ------ | | form | 经 Form.create() 包装过的组件会自带 this.props.form 属性 | object | | | onSubmit | 数据验证成功后回调事件 | object |Function(e:Event) | | prefixCls | 样式类名，默认为 ui-form，通常您不需要设 | string | ui-form|

Form.create(options)

使用方式如下：

  class DemoForm extends Component {}

  export default Form.create({})(DemoForm);

options配置

| 参数 | 说明 | 类型 | | ---------------- | ---------------------------------------------------------------- | ----------------------- | | onFieldsChange | 当 Form.Item 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) | | mapPropsToFields | 把 props 转为对应的值，可用于把 Redux store 中的值读出 | object |

经过 Form.create 包装的组件将会自带 this.props.form 属性，this.props.form 提供的 API 如下：

| 参数 | 说明 | 类型 | ------ | | ---------------- | -------------------------------------------------------| ------- | ------ | | getFieldsValue | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function(props, fields)| | getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) | | setFieldsValue | 设置一组输入控件的值 | Function({ [fieldname]: value }) | | setFields | 设置一组输入控件的值与 Error. | Function(obj: object) | | validateFields | 校验并获取一组输入域的值与 Error. | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) | | validateFieldsAndScroll | 与 validateFields 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 validateFields | | getFieldError | 获取某个输入控件的 Error | Function(name) | | isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | | resetFields | 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) | | getFieldProps | 用于和表单进行双向绑定，详见下方描述 | |

Form.Item

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------------| -----------------------------------------| ------ | ------- | ----- | | label | label 标签的文本 | node | | | | className | 设置 className 值 | string | | | | type | 样式类型，有右边箭头 | string | 'normal' 'link' 'select' | |

this.props.form.getFieldProps(id, options)

id 必填，输入控件唯一标志
getFieldProps options

| 参数 | 说明 | 类型 | 默认值 | | --------------| ----------------------------------------------------| ------- | ------ | | valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | value | | initialValue | 子节点的初始值，类型、可选值均由子节点决定 | string |'onChange' | | trigger | 收集子节点的值的时机 | string | ui-form| | validateTrigger | 校验子节点值的时机 | string | 'onChange'| | rules | 校验规则，参见 async-validator | array | | | onXXX | 由于 getFieldProps 会占用 onChange 等事件（即你所设置的 trigger validateTrigger），所以如果仍需绑定事件，请在 options 内设置 | function | 无| | exclusive | 是否和其他控件互斥，特别用于 Radio 单选控件 | boolean | false|