website·Indexed 29 days ago
https://vue-tiny-validate.js.org/A tiny Vue composition API for data validation. It provides a useValidate hook to handle validation rules, nested data, and result states such as $invalid and $dirty.
vue-tiny-validate is a tiny Vue validation composition library designed to be a robust and minimal alternative to larger libraries like Vuelidate or vee-validate.
Key features include:
message property that accepts the value as an argument.// Dynamic Test (Higher Order Function)
const rgxCheck = rgx => value => rgx.test(value);
// Dynamic Message (Function receiving value)
const rules = reactive({
name: {
name: 'required',
test: rgxCheck(/^[0-9]{5}$/),
message: value => `Your "${value}" is not allowed.`,
},
});vue-tiny-validate library using npm or Yarn.# Using npm
npm install vue-tiny-validate
# Using Yarn
yarn add vue-tiny-validatevue-tiny-validate supports nested objects and arrays. For both, the rules object must mirror the structure of the data object. For arrays, rules are defined using the index as the key.// Nested Data
const data = reactive({
name: 'Evelyn',
add: { street: 'St Louis' },
});
const rules = reactive({
name: { name: 'required', test: v => Boolean(v), message: '...' },
add: {
street: { name: 'required', test: v => Boolean(v), message: '...' },
},
});
// Array Data
const dataArray = reactive({
add: ['St Louis'],
});
const rulesArray = reactive({
add: {
0: { name: 'required', test: v => Boolean(v), message: '...' },
},
});async function or a function that returns a Promise to the test property of a validator.const rules = reactive({
name: {
name: 'required',
test: async (value) => {
const r = await someAsyncCheck(value);
return r;
}
}
});useValidate composition function provides a way to validate reactive data. It requires three parameters: data (mandatory), rules (mandatory), and options (optional). All three must be reactive objects (Ref, Reactive, or Computed). The data and rules objects must share the same property structure at every level. Validation is triggered by calling the result.$test method, and the validation state is stored in the result object.<template>
<input v-model="data.name" />
<div>Is Invalid: {{ result.$invalid }}</div>
<div v-if="result.$messages.length">
<span v-for="(message, index) in result.$messages" :key="index">
{{ message }}
</span>
</div>
<button v-on:click='result.$test'>Validate</button>
</template>
<script>
import { reactive } from 'vue';
import useValidate from 'vue-tiny-validate';
export default {
setup() {
const data = reactive({ name: 'Evelyn' });
const rules = reactive({
name: {
name: 'required',
test: (value) => Boolean(value),
message: 'Name must not be empty.'
}
});
const options = reactive({});
const { result } = useValidate(data, rules, options);
return { result, data };
}
}
</script>watch method to track changes to the parameters effortlessly.To use vue-tiny-validate, you must provide a Data object and a Rules object. Both must be reactive (Ref, Reactive, or Computed). The Data object must contain all properties defined in the Rules object, and both should share the same structure.
Rule, an array of Rule objects, or nested Rules for grouped data.type Data = Record<string, any>;
interface Rule {
test: ((value: any) => boolean) | ((value: any) => Promise<boolean>);
message?: string | ((value: any) => string);
name: string;
}
interface Rules {
[key: string]: Array<Rule> | Rule | Rules;
}rules or options reactive objects will cause validation results to reset. This happens because the library uses watch with shallow comparison; re-assigning the object triggers the watch callback, which re-initializes the validation process.The validation process produces a Result object that tracks the state of the validated properties. This object includes the following properties:
$invalid (boolean): True if any properties have errors.$errors (Array<Error>): A list of error objects, each containing a name and an optional message.$messages (Array<string>): A flat list of all error messages.$dirty (boolean): True if the property value has changed or the $touch method was called.$pending (boolean): True while an asynchronous validation is being performed by $test.interface Result {
$invalid: boolean;
$errors: Array<Error>;
$messages: Array<string>;
$dirty: boolean;
$pending: boolean;
}
interface Error {
name: string;
message?: string | null;
}$test method to manually trigger validation. You can call it on the root result object to validate all properties, or on a specific property to validate only that field. Note: $test is a method of the result object and is distinct from the test function used within a validator.const { result } = useValidate(data, rules);
// Test all properties
const testAll = () => {
result.value.$test();
};
// Test only the 'name' property
const testName = () => {
result.value.name.$test();
};