@copy-paste/validate NPM

Other

grid with Vue.js
loading with Vue.js

Development

npm install @copy-paste/validate

Config

import validate from '@copy-paste/validate'

Vue.use(validate)

//validate inline
Vue.use(validate, {
    inline: true
})

Usage

<template>
    <div>
        <input v-model="fname" v-rule="rules.fname" />
        <input v-model="lname" v-rule="rules.lname" />
        <button @click="submit">submit</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                fname: '',
                lname: '',
                rules: this.$rules({
                    fname({ el }) {
                        if (!el.value) {
                            return 'fname is require'
                        }
                        if (el.value == 'ss') {
                            return 'duplicate fname'
                        }
                    },
                    lname({ el }) {
                        if (!el.value) {
                            return 'lname is require'
                        }
                    }
                })
            }
        },
        methods: {
            submit() {
                const errors = this.rules.validate()
                if (errors.length) return
                //--
            }
        }
    }
</script>

event usage

<input v-model="fname" v-rule="rules.fname" ref="fname" />

//validate
this.$refs.fname.validate()

//force error
this.$refs.fname.error('force') //force

this.$refs.fname.error() //un force

//clear
this.$refs.fname.clear()

add css on element when error

<input v-model="fname" v-rule="rules.fname.options({ css: 'input-error' })" />

.input-error {
    border: 1px solid red;
}

custom error

<input v-model="fname" v-rule="rules.fname.options({ ref: 'err' })" />
<v-rule ref="err" style="color: red;" />

<!-- or -->

<input v-model="fname" v-rule="rules.fname.options({ ref: 'err' })" />
<v-rule ref="err" class="error-custom">
    <template #default="e">
        <v-rule-icon inline width="16" style="margin-right: 5px;" /> {{e.error}}
    </template>
</v-rule>

.error-custom {
    color: red;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

multiple element with one rule

<!-- need key -->

<div v-for="(item, i) in items" :key="i">
    <input v-rule="rules.empty" :key="'item' + i" />
</div>

export default {
    data() {
        return {
            items: [{ id: 1 }, { id: 2 }],
            rules: this.$rules({
                empty({ el, options }) {
                    if (!el.value) {
                        return `${options.key} is require`
                    }
                }
            })
        }
    }
}

watch

export default {
    data() {
        return {
            fname: '',
            lname: '',
            lang: 'th',
            rules: this.$rules(
                {
                    fname({ el }) {
                        if (!el.value) {
                            return 'fname is require'
                        }
                        if (el.value == 'ss') {
                            return 'duplicate fname'
                        }
                    },
                    lname({ el }) {
                        if (!el.value) {
                            return 'lname is require'
                        }
                    }
                },
                {
                    watch: 'lang' //When lang is changed, rules will be validate.
                }
            )
        }
    }
}