vee-validate

To help you get started, we've collected the most common ways that vee-validate is being used within popular public projects.

Tencent / bk-cmdb / src / ui / src / common / js / Validator.js View on Github

return reg.test(value)
    }
}
Validator.extend('http', isHttp)
/*
    长字符
*/
const longchar = {
    getMessage (field, args) { // 错误提示
        return '请输入' + field
    },
    validate: value => { // 验证规则
        return /^([a-zA-Z0-9]|[\u4e00-\u9fa5]|[\(\)\+\-《》_,，；;“”‘’。\."'\\\/])*$/.test(value)
    }
}
Validator.extend('longchar', longchar)

/*
    短字符
*/
const singlechar = {
    getMessage (field, args) { // 错误提示
        return '请输入' + field
    },
    validate: value => { // 验证规则
        return /^([a-zA-Z0-9]|[\u4e00-\u9fa5]|[\(\)\+\-《》_,，；;“”‘’。\."'\\\/])*$/.test(value)
    }
}
Validator.extend('singlechar', singlechar)

/*
    更新Validator

View more ways to use vee-validate

Painless Vue forms

Features

• 🍞 Easy: Declarative validation that is familiar and easy to setup
• 🧘‍♀️ Flexible: Synchronous, Asynchronous, field-level or form-level validation
• ⚡️ Fast: Build faster forms faster with intuitive API and small footprint
• 🏏 Minimal: Only handles the complicated form concerns, gives you full control over everything else
• 😎 UI Agnostic: Works with native HTML elements or your favorite UI library components
• 🦾 Progressive: Works whether you use Vue.js as a progressive enhancement or in a complex setup
• ✅ Built-in Rules: Companion lib with 25+ Rules that covers most needs in most web applications
• 🌐 i18n: 45+ locales for built-in rules contributed by developers from all over the world

Getting Started

Installation

# Install with yarn
yarn add vee-validate

# Install with npm
npm install vee-validate --save

Vue version support

The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table

Usage

vee-validate offers two styles to integrate form validation into your Vue.js apps.

Composition API

The fastest way to create a form and manage its validation, behavior, and values is with the composition API.

Create your form with useForm and then use defineField to create your field model and props/attributes and handleSubmit to use the values and send them to an API.

<template>
  <form>
    <input>
    <span>{{ errors.field }}</span>

    <button>Submit</button>
  </form>
</template>

You can do so much more than this, for more info check the composition API documentation.

Declarative Components

Higher-order components can also be used to build forms. Register the Field and Form components and create a simple required validator:

<template>
  <form>
    

    <span>{{ errors.field }}</span>

    <button>Submit</button>
  </form>
</template>

The Field component renders an input of type text by default but you can control that

📚 Documentation

Read the documentation and demos.

Contributing

You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.

Credits

• Inspired by Laravel's validation syntax
• v4 API Inspired by Formik's
• Nested path types by react-hook-form
• Logo by Baianat

Emeriti

Here we honor past contributors and sponsors who have been a major part on this project.

• Baianat.

⚖️ License

Released under MIT by @logaretm.