Other

paginate

alert

modal

datepicker

select

grid

sidenav

Development

npm install @vue-cb/validate

Config

import validate from "@vue-cb/validate";

createApp(app).use(validate);

Usage

<input v-model="state.firstname" v-rule="rule1.firstname" />
<br />
<input v-model="state.lastname" v-rule="rule1.lastname" />

const rules = inject("rules");
const rule1 = rules({
    firstname: [() => state.firstname, (value) => !value && "กรุณากรอกชื่อ"],
    lastname: [() => state.lastname, (value) => !value && "กรุณากรอกนามสกุล"],
});

const state = reactive({
    firstname: "",
    lastname: "",
});

or multiple item

<input
    v-for="(item, i) in state.items"
    :key="i"
    v-model="item.value"
    v-rule="[() => [item.value, i], rule1.item]"
/>

const rules = inject("rules");
const rule1 = rules({
    item: ([value, i]) => !value && `input ${i} is require`,
});

const state = reactive({
    items: [{ value: "" }, { value: "" }],
});

📑 License

MIT License