form-validation.js
Live Examples
vue@2 + element-ui
Feature
Intuitive APIs.
Asynchronous Rules Support.
Nested Object/Aray Support.
Array Manipulations (push, pop, shift, unshift, splice, reverse) Support.
Zero Dependencies, Native Javascript only.
Overview
const form = {
account: '',
}
const schema = {
account: {
$params: {
languageCode: 'en',
minLength: 6,
},
$normalizer({ value, key, parent, path, root, params }) {
return typeof value === 'string' ? value.trim() : ''
},
$rules: {
weak({ value, key, parent, path, root, params }) {
if (value.length < params.minLength) return 'Too short'
if (/\W/.test(value)) return 'Must contain special charachar'
},
async alreadyBeenUsed({ value, key, parent, path, root, params }) {
if (value === '') return
if (await isExists(value)) return false
},
},
$errors: {
weak({ value, key, parent, path, root, params }) {
return params.$rules.weak
},
alreadyBeenUsed({ value, key, parent, path, root, params }) {
const languageCode = params.languageCode || 'en-US'
return translate(`This account has already been used.`, { languageCode })
},
},
},
}
const validator = {}
// in order to track form's data sctructure (e.g., add new property to object, or push new element to array), you should always update your fields from the proxiedForm instead of the original form
const proxiedForm = FormValidation.proxy({ form, schema, validator })
// validate the entire form
await validator.$v.validate()
console.log(validator.$v.invalid)
// > true
console.log(validator.$v.errors.weak)
// > 'Too short.'
Documentation
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
License
This project is licensed under the MIT License - see the LICENSE file for details