Last active
September 28, 2019 06:26
-
-
Save backbone87/dc1f3a981207d6d435f5209208637786 to your computer and use it in GitHub Desktop.
Vuelidate typings
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// build your own rule | |
declare module 'vuelidate/lib/validators' { | |
import Vue from 'vue' | |
export interface Params { | |
type: string | |
} | |
export interface ValidationParams { | |
readonly name: string | |
readonly params: Params | |
readonly path: string[] | |
} | |
// const ValidationRule | |
export interface ValidationRule { | |
$params(): ValidationParams | |
$pending(): boolean | |
} | |
export type CustomRule = (value: any, parentVm?: Vue) => boolean | |
export interface Helpers { | |
withParams(params: Params, rule: CustomRule): ValidationRule | |
req(field: string): ValidationRule | |
} | |
export const helpers: Helpers | |
// pre-defined rules | |
export function required(): ValidationRule | |
export function requiredIf(field: string): ValidationRule | |
export function requiredUnless(field: string): ValidationRule | |
export function minLength(length: number): ValidationRule | |
export function maxLength(length: number): ValidationRule | |
export function minValue(min: number): ValidationRule | |
export function maxValue(max: number): ValidationRule | |
export function between(min: number, max: number): ValidationRule | |
export function alpha(): ValidationRule | |
export function alphaNum(): ValidationRule | |
export function numeric(): ValidationRule | |
export function email(): ValidationRule | |
export function ipAddress(): ValidationRule | |
export function macAddress(): ValidationRule | |
export function sameAs(field: string): ValidationRule | |
export function url(): ValidationRule | |
export function or(...validators: ValidationRule[]): ValidationRule | |
export function and(...validators: ValidationRule[]): ValidationRule | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
declare module 'vuelidate' { | |
import Vue, { PluginFunction } from 'vue' | |
import { Params, ValidationRule, ValidationParams } from 'vuelidate/lib/validators' | |
export { Params, ValidationRule, ValidationParams } from 'vuelidate/lib/validators' | |
/** | |
* Covers beforeCreate(), beforeDestroy() and data(). | |
* | |
* No public members. | |
*/ | |
export const validationMixin: any | |
// const Validation | |
export interface Validation extends Vue { | |
// const validationGetters | |
readonly $invalid: boolean | |
readonly $dirty: boolean | |
readonly $error: boolean | |
readonly $pending: boolean | |
readonly $params: { [attr: string]: any } | |
// const validationMethods | |
$touch(): never | |
$reset(): never | |
$flattenParams(): ValidationParams[] | |
} | |
// vue plugin | |
export const Vuelidate: PluginFunction<any> | |
export default Vuelidate | |
// vue augmentation | |
type ValidationDecl = ValidationRule | ((...args: any[]) => ValidationRule) | |
interface FlatValidationDecl { | |
[attr: string]: ValidationDecl | |
} | |
interface NamedValidationDecl { | |
[rule: string]: ValidationDecl | FlatValidationDecl | NamedValidationDecl | |
} | |
interface NestedValidationDecl { | |
[attr: string]: ValidationDecl | FlatValidationDecl | NamedValidationDecl | NestedValidationDecl | |
} | |
interface ValidationGroupDecl { | |
validationGroup?: string[] | |
} | |
type ValidationDecls = ValidationDecl | FlatValidationDecl | NamedValidationDecl | NestedValidationDecl | ValidationGroupDecl | |
module 'vue/types/vue' { | |
interface Vue { | |
$v: { [attr: string]: Validation } & Validation | |
delayTouch(v: Validation): undefined | |
validations(): ValidationDecls | |
} | |
} | |
module 'vue/types/options' { | |
interface ComponentOptions<V extends Vue> { | |
validations?: ValidationDecls | |
} | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Which Vue validation library is easy to implement. I tried to use Vee Validate on my website, but didn't get it to work. Maybe I was doing something wrong, but for someone who is a beginner, it was not that easy.