fat-validator
<!-- PROJECT SHIELDS --> [![Build Status][build-shield]]() [![Contributors][contributors-shield]]() [![MIT License][license-shield]][license-url]
Last updated 3 months ago by gepangz .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install fat-validator 
SYNC missed versions from official npm registry.

Build Status Contributors MIT License


Fat-Validator

An vue plugin to optimize HTML form development!
View Demo · Report Bug · Request Feature

Table of Contents

About The Project

Here's why dev it, here.

Built With

Vue

Getting Started

Prerequisites

npm install npm@latest -g

Installation

1. Clone the repo

git clone https://github.com/FatGe/fat-validator

2. Install NPM packages

npm install

3. Run this repo

npm run serve

Usage

1. Install fat-validator in item

npm i fat-validator

2. Install fat-validator in vue

import validator from "./validator";

Vue.use(validator);

3. Mixin validatorMixin in component

import { validatorMixin } from "../validator/index";

export default {
    mixins: [validatorMixin],
}

4. Set validator rules

this is Vue Component

export default {
    data() {
        return {
            name: ''
        }
    },

    validator() {
        return {
            name: [
                {
                    need: () => !!this.name,
                    warn: "不能为空"
                },
                {
                    need: () => this.name.length <= 20,
                    warn: "不能超过20个字符"
                }
            ]
        };
    }
}

if async rule in validator

validator() {
    return {
        name: [
            {
                need: () => !!this.name,
                warn: "不能为空"
            },
            {
                need: () => this.name.length <= 20,
                warn: "不能超过20个字符"
            },
            {
                need: () =>
                    new Promise(resolve => {
                        setTimeout(() => {
                            resolve(!/\d/g.test(this.name));
                        }, 500);
                    }),
                warn: "名称不能包含数字"
            },
        ]
    };
}

async rule should return Promise that resolve(true / false) or


promise(...).then((...) => {
    return true / false
})

5. Use v-validate.method="'validatorNam'"

<el-input
    v-model="name"
    placeholder="请输入内容"
    v-validate.input="'name'"
/>

6. Get validate Result

this.validateResult.name
// or
<template>
    validateResult.name
</template>

7. validate All rule

this.$validator.validateAll().then(result => {
    // result = validate all rules result
});

8. Some other Api

For more examples, please refer to the Documentation

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature)
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Contact

Ge - duangci@aliyun.com

Project Link: https://github.com/FatGe/fat-validator

Current Tags

  • 2.3.1                                ...           latest (3 months ago)

29 Versions

  • 2.3.1                                ...           3 months ago
  • 2.2.0                                ...           3 months ago
  • 2.0.2                                ...           3 months ago
  • 2.0.1                                ...           3 months ago
  • 2.0.0                                ...           3 months ago
  • 1.6.7                                ...           5 months ago
  • 1.6.6                                ...           5 months ago
  • 1.6.5                                ...           8 months ago
  • 1.6.4                                ...           8 months ago
  • 1.6.3                                ...           8 months ago
  • 1.6.2                                ...           8 months ago
  • 1.6.1                                ...           9 months ago
  • 1.6.0                                ...           9 months ago
  • 1.5.2                                ...           9 months ago
  • 1.5.0                                ...           9 months ago
  • 1.4.2                                ...           9 months ago
  • 1.5.1                                ...           9 months ago
  • 1.4.1                                ...           9 months ago
  • 1.4.0                                ...           9 months ago
  • 1.3.1                                ...           9 months ago
  • 1.3.0                                ...           9 months ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 4
Dependencies (4)
Dev Dependencies (14)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |