表单验证在前端项目中是一个常见场景，但是我们常用的UI库中自带的表单组件全部都非常难用，代码量大，API记忆量大，编写复杂，设计不够简洁，但似乎大家对这种开发体验也都习以为常，变得麻木了，然而今天带来的 vue-best-verify 则是一个完美主义的表单验证库，相信能带你打开新世界的大门。

特点

先来看看官方文档描述了该库的哪些特点：

• 超前的设计思想、简化的api、更低的记忆负担
• 更自由的表单结构，你可以编写结构透明的表单，不会提供Form组件来绑住你的手脚
• 内置相等性验证
• 可以高度自定义
• 支持自己适配组件库，且适配成本很低，这意味着该库支持所有的组件库，现在对于非表单元素实现的组件也可以做适配了。
• 自动化的结构分析为你生成提示语，且支持 v-if
• 提供了多个灵活度极高的api，例如：分组功能、范围选择功能、特征选择功能等

安装

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>

我们可以看到使用 vue-best-verify 做表单验证是完全结构透明的，没有额外的多余表单组件，使用起来简洁方便，以上演示的只是最基本的使用方式，官方文档还给出了更多的验证和重置的演示，包括密码的相等性验证、分组验证、范围选择等高级功能，感兴趣的大家可以查看官方文档：https://www.npmjs.com/package/vue-best-verify

最重要的是，在使用过程中如果有什么建议那么作者是可以实时响应的，而且承诺有益的建议是真采纳！