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
Getting Started
Prerequisites
npm install npm@latest -gInstallation
1. Clone the repo
git clone https://github.com/FatGe/fat-validator2. Install NPM packages
npm install3. Run this repo
npm run serveUsage
1. Install fat-validator in item
npm i fat-validator2. 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
});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.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature) - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Contact
Ge - duangci@aliyun.com
Project Link: https://github.com/FatGe/fat-validator
