自定义校验 async-validator

安装依赖

npm i async-validator -s

简单使用

<template>
    <div>
        <label for="test">测试：</label>
        <input id="test" type="text" @blur="handleBlur">
        <div>{{ errMessage }}</div>
    </div>
</template>

<script>
import Schema from "async-validator";
Schema.warning = () => { }; // 去除控制台输出的警告

export default {
    data() {
        return {
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            errMessage: "",
        }
    },
    
    methods: {
        handleBlur(e) {
            const validator = new Schema(this.rules);
            validator.validate({ name: e.target.value }, { firstFields: true }, (errors, fields) => {
                if (errors) {
                    this.errMessage = errors[0].message
                } else {
                    this.errMessage = ""
                }
            });
        }
    },
}
</script>