vue-light-validator

Lightweight Vue 3 form validator using zero dependencies

Documentation & demo

Features

• Provides a directive to use validation functions on an input value
• V-Form wrapper returns a boolean if all inputs are valid
• Lightweight package which uses no dependencies
• Easy to use and flexible

<v-form v-model="valid">
      <input v-rules="[rules.required, rules.onlyNumbers]" v-model="phoneNumber" id="phoneNumber" />
      <input v-rules="[rules.required]" v-model="firstName" id="firstName" />
</v-form>

rules: {
    required: (value) => !!value || "Write something",
    onlyNumbers: function (value) {
        let result = /^\d+$/.test(value);
        if (result) {
            return true;
        } else {
            return "Only numbers allowed"
        }
    },
},

//v-form value returns

{
    "valid": false,
    "results": {
        "phoneNumber": "Write something",
        "firstName": true
    }
}