vue-best-verify v0.4.3

• 这是一个基于 vue3 的表单验证库，它是 vue-better-verify 的完善版本，它的设计是同类库中最完美的一个！

• 创建这个库的原因是 element-plus antd-vue 等，其内部的表单组件太TMD难用了！结构不透明，api记忆量大，代码结构可读性差，不符合直觉， 强约定代码侵入性高。

• 这将会是一个较为详细的API说明，该库足够简约，API足够少了，但是我希望告诉你更多的设计思想和细节，请耐心看完所有。

• 目前vue-best-verify正在活跃开发中，请持续关注版本更新！

黑鬼们应该滚回非洲！

特点

• 超前的设计思想、简化的api、更低的记忆负担、魔法缠绕
• 更自由的表单结构，你可以编写结构透明的表单，不会提供Form组件来绑住你的手脚
• 内置相等性验证
• 可以高度自定义
• 自动化的结构分析为你生成提示语，且支持 v-if
• 提供了多个灵活度极高的api，例如：分组功能、临时跳过、范围选择功能、特征选择功能等

文档

【English】|【简体中文】

TG群：https://t.me/+eeeR19CJuIk4YWZl 反馈用issues

目录

• 安装
• 引入
• 基本使用
• 插槽元素与verify-id
• 自动化的提示语和触发规则
• 配置
• 临时跳过
• 相等性验证
• 自定义验证与And验证
• 分组验证
• 分组联合(新功能)
• 范围选择、特征选择、否定范围、否定特征与自定义选择
• 更安全的v-rule
• 异步验证
• 动态生成表单
• 适配组件库
• 注意事项和已知问题
• 反馈步骤
• 版本变更

安装

⬆️回到目录⬆️

npm install vue-best-verify

引入

⬆️回到目录⬆️

import { createApp } from "vue";
import App from "./App.vue";
import { vue_best_verify } from "vue-best-verify";
import "vue-best-verify/dist/style.css";
const app = createApp( App );
app.use( vue_best_verify );
app.mount( "#app" );

基本使用

⬆️回到目录⬆️

<template>
<div v-verify="verify">
    <div>
        <label>邮箱：</label>
        <el-input v-model="state.email" verify="email, required"></el-input>
    </div>
    <label>密码：</label>
    <div>
        <input v-model="state.password1" verify="password, required, equal" />
    </div>
    <label>确认密码：</label>
    <div>
        <input v-model="state.password2"  verify="password, required, equal"/>
    </div>
    <el-button @click="methods.verify_handle">验证</el-button>
    <el-button @click="verify.do_reset">重置</el-button>
</div>
</template>

<script>
    import { create_verify } from "vue-best-verify"
    import { reactive } from "vue"

    const state = reactive({
        email: "",
        password1: "",
        password2: ""
    })

    const verify = create_verify()

    const methods: {
        verify_methods ()
        {
            if( verify.do_verify() )
            {
                console.log("验证成功")
            }
            else
            {
                console.log("验证失败")
            }
        }
    }
</script>

以上的代码便实现了最基本的表单验证，它已经具备了所有的空提示、错误提示、相等性验证等功能。

让我们来看看对于这个库你可能只需要记忆两个东西即可得到完整的表单验证体验，一个是 v-verify="verify" ，这个代码在所有表单有公有容器的时候只需在容器上加一次，如果没有公有容器就得多写几次，另一个主要记忆的是 verify.do_verify() 这个方法执行验证且返回验证是否通过，至于其他的验证提醒全部是自动化的。

插槽元素与verify-id

⬆️回到目录⬆️

由于vue框架本身的限制在某些组件的插槽内部编写的组件是无法被正确识别的，例如下面的el-select组件是在el-input插槽内部的，默认情况下el-select是无法被识别的，但是可以通过添加 verify-id 属性来解决这个问题，verify-id的取值只需要是一个确定的字符串即可，不要与其他的verify-id重复，当然你要确保每一个元素对应的verify-id是固定的。

<template>
	 <el-input v-model="state.search" clearable>
            <template #prepend>
                <el-select v-model="state.select" style="width: 120px;" verify-id="select01">
                    <el-option label="a" value="a"/>
                    <el-option label="b" value="b"/>
                    <el-option label="c" value="c"/>
                </el-select>
            </template>
        </el-input>
</template>

这种情况只会在一部分的组件中出现，开发中你无需刻意关注这个问题，如果插槽不生效就上verify-id。

自动化的提示语和触发规则

⬆️回到目录⬆️

市面上验证库的糟糕触发机制：

• 几乎所有的验证库都默认采用失焦验证，哪怕你只是不小心点了一下某个输入框，然后失去焦点之后就会有错误提醒出现，这是糟糕的体验，这个时机并不是用户知道验证结果的好时机。
• 很多验证库在输入错误之后，输入的过程中没有做校验，但用户在这个时候反而是最迫切需要知道自己输入的是否正确，如果必须失焦才能知道是否正确就会非常不舒适。

vue-best-verify怎么做

• 对于未造成有效输入的行为不做验证，例如只是来回点了几下输入框，未进行输入的情况。开启验证的方式是输入之后并失去焦点(第一次输入的过程并不需要校验，从第二次开始输入的过程才会实时校验)
• 开启验证之后的每一次输入都会重新做校验，你可以第一时间知道自己输入是否正确

默认系统会自动生成提示语，该库会找到每一个输入框前方最近的label内容，用其生成提示（如果没有label也是无所谓的），label可以是标签，也可以是包含label字样的类名(abc-label label 等都可以)。结构的层级关系是不重要的，例如label中的内容为 用户名： 最终生成的提示语为：请输入用户名 用户名输入错误 当然具体的提示语后面可能做一些语言上的优化。

目前对于没有label的表单也能适用，我做了一些这方面的优化，对于我所能预见的场景已经覆盖。

你也可以自定义错误提示，只需要在元素上加对应属性即可，参见下面的属性部分

配置

⬆️回到目录⬆️

该库大量采用分层设计，配置分为3层，分别为全局配置、组件配置、属性配置，且他们都是可覆盖的，更具体的配置会覆盖更宽泛的配置，也就是属性配置优先级最高，其次是组件配置，最后是全局配置。下面有完整的配置说明。

什么是全局配置？

app.use( vue_best_verify, {
    regex: {}
    ... // 这里的配置是全局配置所有的地方都可以应用到这里的配置,注意这里不要配置valid,配置了也不会生效
});

什么是组件配置？

// 在组件中create_verify中配置的内容就是组件基本配置
import type { Valid } from "vue-best-verify"
import { create_verify } from "vue-best-verify"

const valid: Valid = {}

const verify = create_verify({
        regex: {},
        valid,
        ... // 这里是组件级别的配置
})

什么是属性配置

<div v-verify="verify">
    <label>用户名</label>
    <!-- 通过元素上的属性提供的配置就是属性配置，优先级最高 -->
    <div><input verify="required" /></div>
</div>

注意在 属性 verify 中提供的关键字有 required equal ，required表示必填，当然你也可以直接作为html的属性写上去，equal表示相等性验证，所有包含equal的内容必须相等才能通过验证。

其他的例如：password email number integer 这些都是内置的正则名称，你可以扩展这些名称，扩展之后就可以用你自定义的名称了，系统内置的正则有：

// 电话号码正则
phone
// 邮箱正则
email
// 密码正则
password
// 六位数字的验证码正则
sms
// 整数正则
integer
// 数字正则,支持小数
number

注意这些正则可以多个一起写，他们是 or 关系，例如

<el-input verify="password, sms, number, required"></el-input>

注意 require 和 equal 是特殊的关键字虽然他们也是用逗号分割，但是不要理解成or的关系

属性配置无法覆写 regex 和 valid

除了 regex valid 其他的配置都可以用属性配置来覆写，规则名称以- 分割路径得到完整的属性名，注意所有的下划线也都要换成横杠，例如我要通过属性覆写 msg.err和 border_hint,我可以编写如下的代码。

理论上属性上的配置是可以响应的，也就是说如果你使用变量绑定了某个属性配置，那么随着变量的修改对应的元素也会有所变化，如果你发现了一些应该具备响应的属性配置没有响应那么可能是一个bug，请向我反馈

<el-input verify="required" msg-err="{label}输入有误" border-hint="false"></el-input>

下面是完整的配置类型定义

// 全局配置类型
interface GlobalConfig{
    // 正则表达式配置
    regex?: Record<string, RegExp>;
    // 配置特殊的输入框类名
    special_input_classes?: string[],
    top_container_classes?: string[],
    base_container_classes?: string[],
    // 标识分组的类名，一般只有单选框组或多选框组要把分组组件的根class标识填在这里
    group_classes?: string[],
    // 标记特殊的组件是否是用来选择的组件，这个只影响系统默认的提示是请输入还是请选择
    selectable_classes?: string[],
    // 用于扩展目标元素的选择器字符串，多个选择器使用,分开
    target_selector?: string,
    // 用来修改获取值逻辑的函数
    get_value?: ( ...args: any[] ) => any,
    observer?: {
        // 是否会应用这个observer监控的条件
        condition: ( dom: any ) => boolean,
        // 如果条件成立会应用监控函数
        fn: ( dom: any, binding: any, do_verify?: any, do_reset?: any ) => any
    },
        // 是否启用默认的错误样式显示
    hint?: boolean | {
        // 规则匹配错误的时候是否显示文字提示
        err?: boolean;
        // 必选项为空的时候是否显示文字提示
        empty?: boolean;
        // 相等性验证失败的时候是否显示文字提示
        equal?: boolean;
    };
    // 验证失败的时候是否显示空色边框提醒
    border_hint?: boolean;
    // 定制错误时的消息模板，{label} 表示提取的标签名称
    msg?: null | {
        // 错误提示模板
        err?: string;
        // 空提示模板
        empty?: string;
        // 相等性提示模板
        equal?: string;
    };
    // 是否显示星号
    asterisk?: boolean;
    // 星号的位置，只能设定左还是右
    asterisk_position?: "left" | "right";
}

// 组件级别的配置类型，其中除了valid do_verify do_reset，其他的都可以作为属性配置
interface ComponentConfig {
        // 是否启用默认的错误样式显示
    hint?: boolean | {
        // 规则匹配错误的时候是否显示文字提示
        err?: boolean;
        // 必选项为空的时候是否显示文字提示
        empty?: boolean;
        // 相等性验证失败的时候是否显示文字提示
        equal?: boolean;
    };
    // 验证失败的时候是否显示红色边框提醒
    border_hint?: boolean;
    // 定制错误时的消息模板，{label} 表示提取的标签名称
    msg?: null | {
        // 错误提示模板
        err?: string;
        // 空提示模板
        empty?: string;
        // 相等性提示模板
        equal?: string;
    };
    // 是否显示星号
    asterisk?: boolean;
    // 星号的位置，只能设定左还是右
    asterisk_position?: "left" | "right";
    // 一个函数对象，里面的函数用来做自定义验证
    valid?: Valid;
    // 这个不要配置，是自动注入的，调用的时候使用 .do_verify()
    do_verify?: any;
    // 这个不要配置，是自动注入的，调用的时候使用 .do_reset()
    do_reset?: any;
}

临时跳过

⬆️回到目录⬆️

所有在标签上的属性配置都是响应的，所以 skip 属性也能动态响应，如果你想临时跳过某个元素你可以在那个元素上添加该属性，并将其指向一个响应的变量，当然你也可以使用后面将会介绍的范围选择和特征选择功能来实现这个需求。

<div v-verify="verify">
	<div>
        <label>用户名</label>
        <!-- skip的值可以是 true 或 false -->
        <el-input v-model="state.username" :skip="state.skip" required></el-input>
    </div>
</div>

自定义验证与And验证

⬆️回到目录⬆️

自定义验证

如果你希望在函数内部用函数做自定义验证那么可以使用 valid,在组件内可以有如下定义

const valid: Valid = {
    aaa ( value, dom )
    {
        return true; // 显式的返回 true 表示通过，返回 undefined 也表示通过，所以实际上你不需要在通过的时候return，你只需要在错误的时候返回提示的字符串即可。
    }，
    bbb ( value, dom )
    {
        return {msg: "验证失败", result: false}; // 始终验证失败，但是给出了失败时候的具体要显示的消息，注意这个消息的优先级比所有配置都高
        return "验证失败"; // 这个写法与上面一行有相同的效果，推荐这个简化后的写法。
    }
}
const verify = create_verify({ valid })

应用的时候可以这样写

<el-input verify="required, aaa(), bbb()"></el-input>

可以看到自定义验证只是在后面多了一个括号。自定义验证的 value 和 dom 参数为默认传递的，如果你希望额外传入自定义的参数，那么你需要使用 v-rule 写法，请参看下方对应的章节。

And验证

大多数时候我们可能用的是 or 关系的验证，但是有些时候你真的需要 and 关系的验证，那么可以使用 & 来组合规则

<el-input verify="required, number & aaa()"></el-input>

这个表示该项为必填，且内容应该为数字，并且要通过 aaa 的自定义验证。

相等性验证

⬆️回到目录⬆️

如果你希望两个表单值必须一致才能通过验证那么可以将两个表单元素都加上 equal ，所有加上了该修饰符的元素必须值一样才能通过验证

分组验证

⬆️回到目录⬆️

到这里来想一个问题，假如你一个组件里面有两个表单， 那怎么搞？当然你可以定义两个verify，分别为 verify1 verify2 不过如果你不希望定义那么多的verify你可以使用分组，其实分组是默认开启的且没法关闭，上面的示例所有的表单元素都在一个叫做 default 的分组中。

要自定义分组只需要这样写 v-verify:group1="verify" 然后验证的时候可以指定分组验证：verify.do_verify("group1")

无参数的 do_verify 和 do_reset 调用默认是 default 分组。

分组联合

⬆️回到目录⬆️

如果你希望验证多个分组或重置多个分组,那么你可能会写出下面的代码

verify.do_verify("group-one")
verify.do_verify("group-two")

verify.do_reset("group-one")
verify.do_reset("group_two")

现在你可以这样

verify.do_verify("group-one & group-two")
// 或
verify.do_verify(["group-one", "group-two"])

在多个分组之中你依然可以使用范围选择和特征选择功能

范围选择与特征选择

⬆️回到目录⬆️

该api是对分组api的补充，有着非常高的灵活性。

const verify = create_verify()

// 在所有的分组中选择第二个和第五个元素进行校验
verify.do_verify("*[2, 5]") // 注意是第二和第五，不是从零开始的索引，*表示所有的分组

// 选择one分组下的第6个到最后一个表单元素进行校验，但是要排除第7个元素
verify.do_verify("one[6:last, !7]") // 数字前面加上 ! 表示排除第几个元素

// 特殊关键词 first last 分别表示第一个元素和最后一个元素
verify.do_verify("one[first:last]") // 这等价于 verify.do_verify("one")

// 特征选择，你可以根据一个dom的特征来选择表单元素，例如你希望选择具备类名 abc 和 ddd 的元素，且这个元素要有check属性, 而且这个元素的 id 要等于 123
verify.do_verify("*{class=abc ddd, check, id=123}")

// 特征选择和范围选择可以连用
verify.do_verify("one[first, 2:6]{class=abc}")

// 否定范围
verify.do_verisy("*[2:8, !3:5]") // 选择第2-8个元素但是排除3-5个元素

// 否定特征
verify.do_verify("*{class=abc ccc, !class=ddd}") // 选择具备类名abc 或 ccc的元素但是排除具备类名 ddd 的元素

// class 行内否定，上面写了两个class不够简洁，你可以使用如下写法
verify.do_verify("*{class=abc ccc !ddd}")

// 自定义选择
verify.do_verify("one[2:8]",function(dom){
    // 在这里返回true就是留下的元素，返回false就是被过滤掉的元素
})

默认的 do_reset 也同样支持上面的写法。

更安全的v-rule

⬆️回到目录⬆️

通过使用标签属性配置表单规则的方式简单易用，但不一定适合所有的场景，如果你希望表单能够尽可能安全一些，那么v-rule 可能是更适合的写法。因为属性配置写法是可以通过在浏览器中删除对应规则来让表单的限制失效的，但是v-rule 并没有提供给用户可以直接让表单失效的入口。

我没有更推荐你使用那种方式，这取决于你的场景和你的想法，下面来演示一下 v-rule 的多种写法：

<template>
	<div v-verify="verify">
        <!-- 这个适用于不需要动态属性的时候,下面两个写法都行，并且可以同时使用 -->
    	<el-input v-rule="'required password custom() & email'"></el-input>
        <el-input v-rule.required.password></el-input>
        <!-- 下面的写法在需要动态属性的时候可以派上用场 -->
        <el-input v-rule="{verify: 'phone email & abc()', required: () => state.required, msg_err: '出错了的提示'}"></el-input>
    </div>
</tempalte>

<script setup>
    const state = reactive({
        required: true
    })
</script>

自定义验证传参问题

自定义验证传参的功能是一个期望被实现的功能，所以0.2.0版本开始我将其与 v-rule 功能一起实现。传参功能需要在 v-rule 指令中使用对象写法并给出 args 参数，该属性会被当做参数传递给自定义校验函数，args`必须是一个数组，数组的每一项都作为自定义函数的额外参数。

<template>
	<div v-verify="verify">
        <!-- 如果你希望你传入的参数是动态的那么需要传入ref对象或者一个返回reactive某个属性的函数，或者一个由reactive和字段组成的数组。如果要传入的值本来就是一个对象那么你可以直接传递，它本来就是动态的，如果值是固定的那么也是直接传就好了，不需要函数包裹 -->
        <el-input v-rule="{verify: 'abc()', args: [() => state.num, username, [state,'id'], state.pass, obj]}"></el-input>
    </div>
</tempalte>

<script setup>
    const verify = create_verify({
         valid: {
            abc (value, num, username, id, pass, obj, dom)
            {
                // 这里将会得到 num username id 的最新的值
                // pass 将总是为 "888"
                // obj 由于本来就是引用类型，所以你总是可以得到最新的obj内部的值，例如 obj.a
                // value 始终作为第一个参数，dom始终作为最后一个参数
            }
        }
    });

    const user_name = ref("")

    const obj = {
        a: 666
    }

    const state = reactive({
       num: 1,
        id: 8,
        pass: "888"
    })
</script>

异步验证

⬆️回到目录⬆️

在开发过程中你是否遇到过某个验证框的结果是依赖接口请求的？那么想想你自己的实现方式是否能称得上优雅、极致？异步验证功能就是来解决这个问题的。

当然 vue-best-verify@0.2.x 也能解决这个问题，只是业务代码量会较多一些，0.3.x 则对这个情况提供了专门的极简API，接下来开始介绍该功能。

我们的自定义验证依赖接口请求，而接口请求又是需要时间的，在一个输入框中我们的验证触发可能极其频繁，速度远快于网络请求的速度，所以如果不对失效的网络请求做取消处理那么就无法可靠的管理异步验证，因此你要有自己的方案来支持可取消的网络请求，下面是我构建的可取消的网络请求最终的效果，如果你也想知道具体的实现方式，可以关注我的youtube频道，后续我可能会录制相关视频。

const [ http_ps, http_cancel ] = api_xxx( {params: xxx}, true ) // 最后一个参数为 true 的时候那么请求自动具备可取消的功能

setTimeout( () => {
    http_cancel.cancel(); // 调用这个方法即可取消正在发送的请求
},1000 )

const [ is_ok, res ] = await http_ps; // is_ok 表示请求是否成功 res 表示请求返回的结果或错误对象

现在来看一下异步验证的API示例

<template>
	<div v-verify="verify">
    	<label>输入框校验标题</label>
        <el-input v-model="state.input" v-rule="'required custom_check()'"></el-input>
	</div>
	<button @click="methods.async_check">验证</button>
</template>

<script>
import { create_verify } from "vue-best-verify"

const state = reactive( {
    input: ""
} )

const verify = create_verify({
    valid: {
        async custom_check ( value, on_cancel, dom )
        {
            /*
            	on_cancel 只会在 valid 内部的 async 函数中才会作为倒数第二个参数传递，如果是普通函数那么是没有这个参数的，所以异步验证功能是非破坏性的！0.2.x的用户可以直接升级到0.3.x
            	on_cancel 函数是用于向内部注入取消逻辑的
            	如果你传递了若干个自定义的参数，例如 a 和 b 那么最终的参数顺序为 value, a, b, on_cancel, dom 这个参数顺序的设定考虑到两个点，一个是对于旧版本一定程度的兼容，一个是具体参数重要性权重。
            */
            const [ http_ps, http_cancel ] = api_xxx( {params: xxx}, true )
            on_cancel( () => http_cancel.cancel() ); // 添加请求取消逻辑
            const [ is_ok, res ] = await http_ps;  // 等待请求结束
            if( !is_ok ) return res.err_message; // 如果请求失败那么将后台返回的错误信息展示出来，如果请求成功返回的是默认的undefined表示通过验证
        }
    }
})


const methods: {
    async async_check()
    {
        console.log("验证结果为：")
        console.log(await verify.async_verify()) // 异步验证就不能使用 do_verify 了，要用 async_verify ，而且记得它始终返回Promise
    }
}
</script>

动态生成表单

⬆️回到目录⬆️

0.4.0版本之前你依然可以使用动态生成表单的方式来验证表单，但是你很难收集到动态生成的表单包含的所有值，0.4.0版本之后给你提供了对应的方法来方便的获取值。

<style scoped>
.form-item{
    margin: 10px;
}
</style>

<template>
    <div v-verify="verify">

        <div v-for="item in state.form_list" class="form-item">
            <label>{{ item.name }}</label>
            <el-input v-model="item.value" required :name="item.name"></el-input>
        </div>

        <el-divider>下面是静态的表单项</el-divider>

        <div class="form-item">
            <label>静态表单reactive变量</label>
            <el-input v-model="state.input1" required></el-input>
        </div>
        <div class="form-item">
            <label>静态表单ref变量</label>
            <el-input v-model="input2" required name="input2"></el-input>
        </div>

        <div>
            <el-button @click="state.form_list.pop()">清除一个项</el-button>
            <el-button @click="state.form_list.push({name: Math.random().toString(32).slice(2,6), value: ''})">新增一个项</el-button>
            <el-button @click="verify.do_verify">验证</el-button>
            <el-button @click="verify.do_reset">重置</el-button>
            <el-button @click="methods.print_field">执行 get_field</el-button>
            <el-button @click="methods.set_field">设置值 set_field</el-button>
            <el-button @click="methods.get_fields">执行 get_fields</el-button>
            <el-button @click="methods.set_fields">设置多个值</el-button>
        </div>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { create_verify } from "vue-best-verify";

const verify = create_verify();
const input2 = ref("");
const state = reactive( {
    input1: "",
    form_list: [
        {
            name: "a",
            value: "123"
        },
        {
            name: "b",
            value: "666"
        },
        {
            name: "c",
            value: "888"
        }
    ]
} );

const methods = {
    print_field ()
    {
        console.log(verify.get_field('input1'))
    },
    set_field ()
    {
        verify.set_field("input1", Math.random())
    },
    get_fields ()
    {
        console.log(verify.get_fields())
    },
    set_fields ()
    {
        verify.set_fields({
            input1: "木瓜",
            input2: "西瓜"
        })
    }
}
</script>

以上是一个动态表单和新增函数的使用例子，注意使用新增的几个函数你需要在每个表单项上设置name属性，但是我对使用 reactive 做数据绑定的表单项做了单独优化，只有这一种你不需要再表单项上方使用name属性标识，但是如果你也做了标识那么以标识为主。

适配组件库

⬆️回到目录⬆️

组件库适配API文档暂不提供，该库已自带适配了 element-plus antd-vue arco-vue三个组件库，其他库请联系作者适配。

自定义适配组件库的API后续考虑好之后在公开。

注意事项和已知问题

⬆️回到目录⬆️

• 对于原生表单元素需要使用一个 div 包裹他们，因为原生的表单元素内部无法在生成用于提示的dom了
• element-plus 中的时间日期选择器上的属性会被自动剔除，所以这个组件也要用div包裹，然后把配置写在div上面, antd的时间选择器也是这样，类似组件同理。
• 有些组件由于不是单个根元素组件，所以直接在上面写 v-rule 可能不生效，那么就写在组件的父元素上就好了，其他同理。

反馈步骤

⬆️回到目录⬆️

你可以向我反馈或大或小的bug，你也可以反馈使用体验问题，或者自己天马行空的API设计想法。

向我反馈请加TG群

反馈时携带的信息是很重要的，一般来说最好的反馈是：你遇到了一个 bug，你需要思考此bug所依赖的最小逻辑有哪些？然后使用vue脚手架创建一个新的项目，在其中使用最小逻辑来复现它，并将该bug复现项目发送给我（如果一个组件就可以很好的复现问题那么提供一个单文件组件也是可行的）。别忘了附带复现步骤。

以上步骤也是我在向webstorm官方提bug时经常做的事情，它很有效，并且包含充足信息！

当然事实上并不是所有人都总是有时间完成最好的反馈，你可以在遇到bug的第一时间提供给我你能提供的尽可能多的信息，我一般会自己尝试并思考问题可能出现在哪里，之后在空闲的时候提供更接近最好反馈的信息给我，注意希望你是真的时间紧迫而不是懒惰。

BUG或功能建议一旦被确认，会在实现版本中署名，默认名称为联系账号的用户名，如要指定请在提问题建议的时候携带自己的名称。

TODO

⬆️回到目录⬆️

• 支持命名空间联合验证与重置

版本变更

⬆️回到目录⬆️

• 0.4.1
  • 分组联合验证与重置
• 0.4.0
  • 带来动态表单相关的功能，为verify添加 get_field set_field get_fields set_fields 方法
• 0.3.0
  • 破坏性变更：自定义传参现在必须是数组
  • 带来异步验证功能。
  • 支持插槽内部的组件，需要添加 verify-id 标识
  • 增强组件适配el-radio-button el-checkbox-button
• 0.2.0
  • 破坏性变更： 属性规则编写的时候去除了 verify- 前缀，以前的 verify-msg-err 现在是 msg-err
  • 破坏性变更： 自定义 do_reset API 彻底删除，这个原先因为实现问题而存在的API终于被清除了，现在你将会体验完全的自由！
  • 破坏性变更： 自定义验证的传参，现在函数的参数顺序有更改，之前是只有 value 和 dom，现在是如果你自己传了参数，那么会放在 value 和dom之间。
  • 代码几乎完全重构，更清晰好看的代码结构
  • 安全性增强并提供 v-rule 的方式来配置表单，这种方式会隐藏表单规则，避免用户通过修改html元素来绕过验证
  • 大幅增强配置与界面之间的响应和联动，你设置的所有动态属性都会随着值的变化而更新UI界面
  • 投入大量时间重新适配 element antd arco UI库，覆盖所有的表单元素（不包含不必要的组件，例如：评分、穿梭框、上传组件，这类组件感觉适配了也没啥用。），如果你们团队正在使用其他的组件库也可以联系我进行适配，有些东西稍微争取一下就有了。
  • 自定义校验函数支持传参，该功能仅在 v-rule 写法中被支持，使用 args 字段来传参。
  • do_reset 在任何时候都可以使用范围选择、特征选择等功能
  • 是否写过类似 <button @click="verify.do_verify">验证</button> 这样的代码？但是它不生效？理论上它不生效是具备客观原因的，这种写法默认传入的参数是一个event，而不是一个合法的参数，但是那又如何？我自己在测试的时候也会这样写，当它无效的时候我很不适，这样写多方便啊！所以现在它已经是一个有效的写法了！
  • 文档添加临时跳过功能的演示
  • 提供自定义指令名称的配置，如果你不希望叫 v-verify 和 v-rule 那么你可以自己设置
  • 之前我们必须使用逗号分割规则，例如verify="required, equal, phone"，现在你可以使用空格来分割verify="required equal phone"
  • 添加 0.2.0 版本更新指导文档
  • 任何时候都可以不传分组名称，默认的分组名称总是 default
  • 支持 v-model.value 的组件
• 0.1.22 添加反馈步骤引导与下个版本的API变化预告。
• 0.1.21
  • 修复bug：在使用 v-if 的时候对于已经销毁的dom未及时清理导致调用验证失败的问题。bug提供者(S One "乖乖女")
• 0.1.19
  • 发布重要功能：支持指定范围验证，特征匹配验证，否定匹配验证，和自定义验证，也就是现在你可以指定单独验证表单中的第几个元素或者第2-6个元素，或者指定验证带有属性 abc 的元素，或者提供一个过滤函数来自定义范围等，该功能用于弥补分组验证的不足，在你认为分组验证太重量级的场景下这个功能也许可以提供给你更丝滑的体验。
  • 小幅度优化性能
  • 自定义验证函数增加 value 和 dom 参数
  • 修复同一个verify实例被应用于多个指令时dom收集出错的问题
  • 自定义验证函数返回值简化，现在在错误的时候可以直接返回提示的字符串，而不是一个对象，具体参见自定义验证章节
  • 0.1.19@beta.20231013*引入的新功能：
    • verify_reset 的暴露会增加用户的理解成本和记忆成本，所以现在提供了更好的替代方法 custom_reset
    • 为单元素表单重置do_reset提供专门的简化写法。
    • 分组中也支持了单元素表单重置do_reset的独特写法。
    • 修复在重置do_reset之后* 分组失效的问题。
    • 增强分组功能，现在自定义重置函数不必要填写所有的分组名称，对于没有填写的分组会回退到默认的重置行为。
    • 修复了弹窗中的表单可能因为dom被删除而导致的 undefined 访问。
• 0.1.18
  • 新的api create_verify 用来创建更健壮的 verify 对象，以前的写法依然支持，我建议你替换成新的写法，但是如果你懒得换也没问题
  • 错误调用方法时将会在控制台给出打印提醒
  • 优化 label 查找机制，以前的版本label会无限向上查找，在没有label的表单中可能会找到上一个表单元素的label，现在的label查找不会跨越表单元素
  • 修复 element-plus 单选框组和多选框组重置的时候无法清除提示状态的问题
  • 优化错误提示的样式
  • 修复 do_verify 验证所有分组报错的bug
  • do_verify 和 do_reset以前的默认参数是 default ，现在它是 *
  • 添加单元测试
  • 文档更新
• 0.1.15
  • 解决 select 元素应用 verify 出错的bug，（bug提供者：两个大水滴）
• 0.1.12
  • 修复分组多选框和分组单选框的验证bug
• 0.1.10
  • 修复组件适配api相关bug
• 0.1.9
  • 修bug
• 0.1.8
  • 完全重构的代码，内部更清晰的逻辑表达
  • 支持非表单元素封装的组件的适配
  • 组件适配api小幅度的变动，主要新增了target_selector ，修改了 observer 的编写方式
• 0.1.7
  • 支持元素级别的 v-if
• 0.1.6
  • 支持分组级别的 v-if
• 0.1.2
  • 修复相等性验证问题
• 0.1.0 预览大版本更新， API基本固定，后续主要优化内部代码和提升稳定性
  • 开放组件库适配
  • verify 不在写进 reactive 状态中，也不能写到 reactive 或 ref 状态中，需要单独成立一个非响应变量
  • 适配更多的组件库和元素
• 0.0.32
  • 增加对 el-checkbox 和 el-radio 的支持
  • 若干场景的自测
• 0.0.34
  • 增加对element-plus时间选择器的适配

最后

欢迎反馈bug和建议！！！