svf

A simple validate form and React-based implementation.

Install

Run the following command in the root directory of your svf install:

npm install svf

Usage

quotes components from svf in your project.

  import { Form, Row, Column, Input, Button } from "svf";

use svf components to build your validate form.

    <Form onSubmit={ this.onSubmit }>
        <Row>
            <Column>
                <Input rules={ [ { type: "empty", message: "userName can't be empty!" } ] } label="userName" required={ true } type="text" name="userName" placeholder="please input your username" />
            </Column>
            <Column>
                <Input rules={ [ { type: "empty", message: "password can't be empty!" } ] } label="password" required={ true } type="password" name="password" placeholder="please input your password" />
            </Column>
        </Row>
        <Row>
            <Column>
                <Button type="submit">submit</Button>
            </Column>
        </Row>
    </Form>

get the form-data in the onSubmit handlers from Form component.

    onSubmit (data) {
        // { userName: "", password: "" }
        console.log(data);
    }