@23zane/vue-validator 中文文档教程

Question

Vue Validator

Vue 3 验证器基于 @vue/composition-api, @vuelidate/validators 和 @vuelidate/core。

这个包是为了在一个通用的反应对象上使用验证而构建的，它显示与其类型相关的输入。

Usage

这个包有一个主要功能：useValidation

export const useValidation: <FormDataType, FormDataValuesType extends unknown, InputTypes extends GenericInput = GenericInput>(
    inputs: Ref<InputType<FormDataType, InputTypes>> | InputType<FormDataType, InputTypes>,
    formData: Record<keyof FormDataType, FormDataValuesType> | Ref<Record<keyof FormDataType, FormDataValuesType>>,
    checkDirty?: boolean,
    registerAs?: string,
    callbacks?: Partial<{
        onInputChange: <K extends keyof FormDataType = keyof FormDataType>(key: K, value: FormDataType[K]) => void;
        onInputInvalid: <K extends keyof FormDataType = keyof FormDataType>(key: K) => void;
        onInputValid: <K extends keyof FormDataType = keyof FormDataType>(key: K) => void;
    }>) => {
    v: Ref<Validation<ValidationArgs<FormDataType>, Record<keyof FormDataType, FormDataValuesType>>>,
    isInvalid: boolean,
    isInputInvalid: (key: keyof FormDataType, excludeDirty?: boolean) => boolean,
    isInputTouched: (key: keyof FormDataType) => boolean
};

它接收具有以下属性的通用输入

export type GenericInput = {
    mandatory: boolean;
    name: string;
    rules: (string | {key: string, func: (value: any) => boolean})[];
    exclude_dirty?: boolean; //To avoid dirty check
}

记录：FormDataType 的记录，以及其他属性：

checkDirty：是否将表单值设置为无效，直到它们被删除't modified - 查看脏状态

registerAs: vuelidate registerAs 属性 - 查看 https://vuelidate-next.netlify.app/

回调：这些回调，如果通过，则为每个属性切换，

The function returns an object containing

{
    v: Vuelidate object containing your form attributes, ready to be touched, see https://vuelidate-next.netlify.app/guide.html#the-dirty-state,
    isInvalid: Vuelidate generic isInvalid object,
    isInputInvalid(key): Function that returns if an input is invalid,
    isInputTouched(key): Function that returns if an input is touched, aka the form attribute has changed.    
}

The library is NOT touching the attributes, if you want to apply automatic touch on change, you can use onChange callback like below:

const {v, isInvalid, isInputInvalid, isInputTouched} = useValidation<FormData, string | boolean>(inputs, formData, false, undefined, {
    onInputChange(key){
        v.value[key].$touch();
    }
});

List of rules applicable:

requiredIf:name,value 设置当 $name 具有 $value 值时所需的输入;

requiredIfNot:name,value 设置当$name 的值不同于$value 时需要的输入；

sameAs:name 输入值需要与$name值相同；

notSameAs:name 输入值需要不同于$name值；

min:number 输入值至少需要 $number 个字符；

ma​​x:number 输入值需要少于$number 个字符；

minValue:number 输入值必须大于$number；

ma​​xValue:number 输入值必须小于$number；

日期 输入必须是有效日期（YYYY-MM-DD）；

日期时间 输入必须是有效日期（YYYY-MM-DD HH:mm:ss）；

email 输入必须是有效的电子邮件；

required 在对象模型中输入是必需的（同mandatory:true）；

accepted 输入必须=== true 或=== 1；

full_number 输入必须是数字；

number 输入必须有数字；

char 输入必须有一个字符；

regex:regex 输入必须匹配正则表达式，es: regex:/^[az]+$/;

minDate:date 输入日期必须晚于或等于$date (YYYY-MM-DD)；

ma​​xDate:date 输入日期必须早于或等于$date (YYYY-MM-DD)；

minDatetime:date 输入日期必须晚于或等于$date (YYYY-MM-DD HH:mm:ss)；

ma​​xDatetime:date 输入日期必须早于或等于$date (YYYY-MM-DD HH:mm:ss)；

minMonth:date 输入值必须晚于或等于$date (YY-MM)；

ma​​xMonth:date 输入值必须早于或等于$date (YY-MM)；

iban 输入值必须是有效的欧洲 IBAN；

Example

type FormData = {
    name: string;
    surname: string;
    email: string;
    privacy: boolean;
}

const inputs: Record<keyof FormData, GenericInput> = {
    name: {
        name: 'name',
        mandatory: false,
        rules: ['requiredIf:surname,'],
    },
    surname: {
        name: 'surname',
        mandatory: false,
        rules: ['requiredIf:name,'],
    },
    email: {
        name: 'email',
        mandatory: true,
        rules: []
    },
    privacy: {
        name: 'privacy',
        mandatory: true,
        rules: ['boolean']
    }
};
const formData = reactive<FormData>({
    name: "test",
    surname: "",
    email: "",
    privacy: false
});

const {v, isInvalid, isInputInvalid, isInputTouched} = useValidation<FormData, string | boolean>(inputs, formData, false);

return {
    v,
    isInvalid,
    isInputInvalid,
    isInputTouched
}