搜索
首页web前端Vue.jsvue3+async-validator如何实现表单验证

vue3+async-validator如何实现表单验证

May 11, 2023 am 09:55 AM
vue3asyncvalidator

    搭建vue3的项目

    创建项目前 这里我们首先要说明的是,我们使用的版本情况

    • Nodejs:v17.5.0

    • pnpm:7.0.0

    • Vue:3.2.25

    首先我们 Vite 创建一个 vue3 的项目demo,名字就叫 FormValidate, 我们在命令行输入命令

    pnpm create vite FormValidate 回车

    然后选择 vue

    继续回车,说明我们已经初步创建了 FormValidate (表单验证)项目

    根据命令行的提示,我们进入项目根目录,然后使用命令 pnpm install 安装项目需要的依赖,当然这里使用 pnpm 是比 npm 或者 yarn 快很多的。

    接着,我们启动项目 pnpm run dev, 终端中输出如图内容

     vite v2.9.7 dev server running at:
      > Local: http://localhost:3000/
      > Network: use `--host` to expose
      ready in 954ms.

    启动浏览起,输入地址 http://localhost:3000/

    ok, 到这里我们已经把项目搭建起来了,结下来我们就开始来说说我们今天主题-表单验证

    vue3的表单验证

    这里我们使用 async-validator 这是个异步验证表单的插件,在github上有 5k+ 的star,使用的也很广泛,比如 Ant.designElement UINaive UI 等都在使用这个插件,甚至与有些Nodejs后端项目也在使用这个。

    先安装一下这个插件,在命令行输入

    pnpm install async-validator

    这里 async-validator 版本是 4.1.1

    1.表单代码

    打开项目中的 App.vue 文件,删除多余的文件内容,输入标题 vue3 表单验证,并添加一些初始代码

    <template>
        <div class="main">
            <h4>vue3 表单验证</h4>
    
            <form>
                <div>
                    <label class="label">账号</label>
                    <input  type="text"  placeholder="请输入账号" class="input" />
                </div>
                <div>
                    <label class="label">密码</label>
                    <input  tyep="password" type="text" class="input"  placeholder="请输入密码"  />
                </div>
    
                <div>
                    <button>保存</button>
                </div>
            </form>
        </div>
    </template>
    <script setup>
    
    </script>
    <style lang="css">
    .main{
        text-align:center;
    }
    .label {
        padding-right: 10px;
        padding-left: 10px;
        display: inline-block;
        box-sizing: border-box;
        width: 100px;
        text-align: right;
    }
    .input {
        width: 200px;
        height: 30px;
        margin-top:10px;
    }
    </style>

    是不是看起来有点丑,别急,我们加点css代码,简单的美化一下

    <template>
        <div class="main">
            <h4>Vue3表单验证</h4>
    
            <form class="form-box">
                <div class="form-group ">
                    <label class="label">账号</label>
                    <input type="text" class="input" placeholder="请输入账号"  />
                </div>
                <div class="form-group">
                    <label class="label">密码</label>
                    <input  tyep="password" type="text"  placeholder="请输入密码" class="input" />
                </div>
    
                <div class="form-group">
                    <button class="btn ">保存</button>
                </div>
            </form>
        </div>
    </template>
    <script setup>
    
    </script>
    <style scoped>
    .main {
        text-align: center;
    }
    .btn{
        margin: 0;
        line-height: 1;
        padding: 15px;
        height: 30px;
        width: 60px;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
        background-color: #2080f0;
        white-space: nowrap;
        outline: none;
        position: relative;
        border: none;
        display: inline-flex;
        flex-wrap: nowrap;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        user-select: none;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
    }
    .form-box{
        width: 500px;
        max-width: 100%;
        margin: 0 auto;
        padding: 10px;
    }
    .form-group{
        margin: 10px;
        padding: 10px 15px 10px 0
    }
    .label {
        padding-right: 10px;
        padding-left: 10px;
        display: inline-block;
        box-sizing: border-box;
        width: 110px;
        text-align: right;
    }
    
    .input {
        width: calc(100% - 120px);
        height: 28px;
    }
    </style>

    2.添加验证

    2-1. 初始化

    引入ref 属性和 async-validator,这里我们给每个 input 框添加 v-model 绑定属性,

    // html
    <input type="text" v-model="form.account" class="input" placeholder="请输入账号"  />
    <input  tyep="password" v-model="form.password" type="text"  placeholder="请输入密码" class="input" />
    // script
    import { ref } from "vue"
    import Schema from &#39;async-validator&#39;;
    
    const form = ref({
        account: null,
        password: null,
    })

    根据表单的情况,我们定义一个对象,这个对象里面存储了需要校验的对象和校验不通过时的信息

    const rules = {
        account: { required: true, message: &#39;请输入账号&#39; },
        password: { required: true, message: &#39;请输入密码&#39; }
    }

    实例化 Schema, 将 rules 传入 Schema,得到一个 validator

    const validator = new Schema(rules)

    验证单个表单我们使用 失去焦点事件, 定义一个函数,将这个函数添加到 account input上的失焦事件上

    // html
    <input v-model="account" type="text" class="input" @blur="handleBlurAccount" placeholder="请输入账号"  />
    // script
    const handleBlurAccount = () => {}

    接着将实例化后的校验器函数写到 handleBlurAccount 中

    const handleBlurAccount = () => {
        validator.validate({account: form.value.account}, (errors, fields) => {
            if (errors && fields.account) {
                console.log(fields.account[0].message);
                return errors
            }
        })
    }

    在account 的 input 中测试,我们可以看到在控制台打印出了 请输入账号 等字

    同样的,我们给密码框也添加如下代码

    //html
    <input v-model="form.password" tyep="password" type="text" @blur="handleBlurPassword"  placeholder="请输入密码" class="input" />
    //script
    const handleBlurPassword = () => {
        validator.validate({password: form.value.password}, (errors, fields) => {
            if (errors && fields.password) {
                console.log(errors, fields);
                console.log(fields.password[0].message);
                return errors
            }
        })
    }
    2-2. 多个表单的验证

    当然这里校验的只是单个input的,我们接下来说说多个表单的校验,定义一个点击事件为submit,将submit事件添加到button上,当然不要忘记阻止浏览器默认事件

    const submit = (e) => {
        e.preventDefault();
        validator.validate(form.value, (errors, fields) => {
            if (errors) {
                for(let key of errors) {
                    console.log(key.message);
                }
                return errors
            }
        })
    }
    2-3. Promise方式验证

    了上面的方式,async-validator 还提供 Promise 的方式,我们把 submit 函数中的代码修改为如下

    validator.validate(form.value).then((value) => {
            // 校验通过
            console.log(value);
    }).catch(({ errors, fields }) => {
        console.log(errors);
        return errors
    })

    点击保存,同样的,我们可以看到控制台已经打印了错误信息,说明我们写的是合适的

    vue3+async-validator如何实现表单验证

    2-4. 正则验证

    当然有时候我们会输入邮箱,电话号码等表单,这时候我们就需要添加正则来进行验证了,我们先添加两个表单,并添加失焦事件, 正则验证需要用到 async-validator 的属性 pattern,我们将符合要求的正则添加到 rules ,代码如下所示

    <div class="form-group ">
        <label class="label">电话号码</label>
        <input v-model="form.phone" type="text" class="input" @blur="handleBlurPhone"
                        placeholder="请输入电话号码" />
    </div>
    
    <div class="form-group ">
        <label class="label">邮箱</label>
        <input v-model="form.email" type="text" class="input" @blur="handleBlurEmail"
                        placeholder="请输入邮箱" />
    </div>
    
    
    const form = ref({
        account: null,
        email: null,
        password: null,
    })
    
    const rules = {
        account: { required: true, message: &#39;请输入账号&#39; },
        phone: {
            required: true,
            pattern: /^1\d{10}$/,
            message: "请输入电话号码"
        },
        email: {
            required: true,
            pattern: /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/,
            message: "请输入邮箱"
        },
        password: { required: true, message: &#39;请输入密码&#39; }
    }
    
    const handleBlurPhone = () => {
        validator.validate({ phone: form.value.phone }, (errors, fields) => {
            if (errors && fields.phone) {
                console.log(errors, fields);
                console.log(fields.phone[0].message);
                return errors
            }
        })
    }
    const handleBlurEmail = () => {
        validator.validate({ email: form.value.email }, (errors, fields) => {
            if (errors && fields.email) {
                console.log(errors, fields);
                console.log(fields.email[0].message);
                return errors
            }
        })
    }

    当然,测试是没有问题的

    2-5. 长度控制

    假如你要控制表单输入内容的长度,可以使用属性 min 和 max,我们用 account 这个表单作为例子,我们 rules 对象的 account 中添加这两个属性,比如要求账号最少5个字符,最多10个字符,如下

    account: { required: true, min:5, max:10, message: &#39;请输入账号&#39; }

    我们还可以使用 input 的原生属性 maxLength="10" 来控制用户的输入

    2-6. 多个验证条件

    当我们有多个验证条件的时候,我们可以把 rules 的验证条件写成一个数组,我们还是用 account 这个表单作为例子,比如 账号要求必须用中文,且账号最少5个字符,最多10个字符,代码如下

    account: [
        { required: true, min:5, max:10, message: &#39;请输入账号&#39; },
        { required: true, pattern: /[\u4e00-\u9fa5]/, message: &#39;请输入中文账号&#39; }
    ],
    2-5. 自定义验证

    有时候,我们会有使用自定义验证函数的情况,以满足特殊验证情况,这时候,我们可以这样做

    field:{
        required: true,
        validator(rule, value, callback){
          return value === &#39;&#39;;
        },
        message: &#39;值不等于 "".&#39;,
    }

    到这里,vue3的表单验证功能雏形已经基本出来了,下面我们对验证功能进行完善

    3.优化完善

    之前的表单验证虽然已经做出了,但是校验的提示信息是在控制台,这个很不友好,用户也看不到提示,所以这里我们完善下这部分功能

    首先我们在 label 边加一个 "*" 表示必填,并且添加样式,给一个红色,醒目一些

    <label class="label">
        <span>账号</span>
        <span class="asterisk"> *</span>
    </label>
    .asterisk{
        color: #d03050;
    }

    我们考虑到 rules 对象中 required 属性的作用,这里使用 vue 的条件判断语句 v-if 来判断,先定义一个函数,名字就叫 getRequired,然后将 rules.account,作为参数传进去,这里要重点说明一下,如果考虑封装验证方法,这里可以不用传参,不多说,后面讲到了,我们再说,先看代码

     <span class="asterisk" v-if="getRequired(rules.account)"> *</span>
    const getRequired = (condition) => {
        if(Object.prototype.toString.call(condition) === "[object Object]") {
            return condition.required
        } else if (Object.prototype.toString.call(condition) === "[object Array]") {
            let result = condition.some(item => item.required)
            return result
        }
        return false
    }

    因为 rules.account, 有可能是对象或者数组,这里我们加一个判断区别下,如果传递进来的是对象,我们直接将属性required返回回去,至于required属性是否存在,这里没有必要多判断。 如果传递进来的是数组,我们使用 some 函数获取下结果,然后再返回.

    修改 rules.accountrequired 值为false,星号消失,这里只要有一个required 值为true,那么这个星号就显示

    我们接着来添加错误信息的显示与隐藏

    我们定义一个对象 modelControl,这个对象里面动态存储错误信息,

    const modelControl = ref({})

    接着给 accountinput 框添加一个自定义属性 prop, 属性值是 account, 再加一个div显示错误提示信息

    <div class="form-group">
        <label class="label">
            <span>账号</span>
            <span class="asterisk" v-if="getRequired(rules.account)"> *</span>
        </label>
        <input v-model="form.account" type="text" maxLength="10" class="input" prop="account" @blur="handleBlurAccount" placeholder="请输入账号" />
        <div class="input feedback" v-if="modelControl[&#39;account&#39;]">{{modelControl[&#39;account&#39;]}}</div>
    </div>
    
    .feedback{
        color: #d03050;
        font-size:14px;
        margin-top: 3px;
        text-align:left;
        margin-left:110px;
    }

    为了动态的显示和隐藏错误信息,我们需要修改失焦事件 和 submit 事件,在事件执行的时候,动态的将值赋予或清除,代码如下

    const handleBlurAccount = (e) => {
        const prop = e.target.attributes.prop.value
        if (!prop) {
            return false
        }
        validator.validate({ account: form.value.account }, (errors, fields) => {
            if (errors && fields.account) {
                console.log(errors, fields);
                console.log(fields.account[0].message);
    
                modelControl.value[prop] = fields[prop][0].message
                return errors
            }
            modelControl.value[prop] = null
        })
    }
    validator.validate(form.value).then((value) => {
            // 校验通过
        console.log(value);
    }).catch(({ errors, fields }) => {
        console.log(errors, fields);
        for(let key in fields) {
            modelControl.value[key] = fields[key][0].message
        }
        console.log(modelControl);
        return errors
    })

    到这里 表单的动态验证功能基本算是完成了,但是我们发现,每次错误信息的展示都会使得input框跳动,所以还得调整下样式

    .form-group {
        margin: 2px;
        padding: 10px 15px 3px 0;
        height:57px;
        transition: color .3s ease;
    }

    以上是vue3+async-validator如何实现表单验证的详细内容。更多信息请关注PHP中文网其他相关文章!

    声明
    本文转载于:亿速云。如有侵权,请联系admin@php.cn删除
    vue.js和前端堆栈:了解连接vue.js和前端堆栈:了解连接Apr 24, 2025 am 12:19 AM

    Vue.js与前端技术栈紧密集成,提升开发效率和用户体验。1)构建工具:与Webpack、Rollup集成,实现模块化开发。2)状态管理:与Vuex集成,管理复杂应用状态。3)路由:与VueRouter集成,实现单页面应用路由。4)CSS预处理器:支持Sass、Less,提升样式开发效率。

    Netflix:探索React(或其他框架)的使用Netflix:探索React(或其他框架)的使用Apr 23, 2025 am 12:02 AM

    Netflix选择React来构建其用户界面,因为React的组件化设计和虚拟DOM机制能够高效处理复杂界面和频繁更新。1)组件化设计让Netflix将界面分解成可管理的小组件,提高了开发效率和代码可维护性。2)虚拟DOM机制通过最小化DOM操作,确保了Netflix用户界面的流畅性和高性能。

    vue.js和前端:深入研究框架vue.js和前端:深入研究框架Apr 22, 2025 am 12:04 AM

    Vue.js被开发者喜爱因为它易于上手且功能强大。1)其响应式数据绑定系统自动更新视图。2)组件系统提高了代码的可重用性和可维护性。3)计算属性和侦听器增强了代码的可读性和性能。4)使用VueDevtools和检查控制台错误是常见的调试技巧。5)性能优化包括使用key属性、计算属性和keep-alive组件。6)最佳实践包括清晰的组件命名、使用单文件组件和合理使用生命周期钩子。

    vue.js在前端的力量:关键特征和好处vue.js在前端的力量:关键特征和好处Apr 21, 2025 am 12:07 AM

    Vue.js是一个渐进式的JavaScript框架,适用于构建高效、可维护的前端应用。其关键特性包括:1.响应式数据绑定,2.组件化开发,3.虚拟DOM。通过这些特性,Vue.js简化了开发过程,提高了应用性能和可维护性,使其在现代Web开发中备受欢迎。

    vue.js比反应好吗?vue.js比反应好吗?Apr 20, 2025 am 12:05 AM

    Vue.js和React各有优劣,选择取决于项目需求和团队情况。1)Vue.js适合小型项目和初学者,因其简洁和易上手;2)React适用于大型项目和复杂UI,因其丰富的生态系统和组件化设计。

    vue.js的功能:增强前端的用户体验vue.js的功能:增强前端的用户体验Apr 19, 2025 am 12:13 AM

    Vue.js通过多种功能提升用户体验:1.响应式系统实现数据即时反馈;2.组件化开发提高代码复用性;3.VueRouter提供平滑导航;4.动态数据绑定和过渡动画增强交互效果;5.错误处理机制确保用户反馈;6.性能优化和最佳实践提升应用性能。

    vue.js:定义其在网络开发中的作用vue.js:定义其在网络开发中的作用Apr 18, 2025 am 12:07 AM

    Vue.js在Web开发中的角色是作为一个渐进式JavaScript框架,简化开发过程并提高效率。1)它通过响应式数据绑定和组件化开发,使开发者能专注于业务逻辑。2)Vue.js的工作原理依赖于响应式系统和虚拟DOM,优化性能。3)实际项目中,使用Vuex管理全局状态和优化数据响应性是常见实践。

    了解vue.js:主要是前端框架了解vue.js:主要是前端框架Apr 17, 2025 am 12:20 AM

    Vue.js是由尤雨溪在2014年发布的渐进式JavaScript框架,用于构建用户界面。它的核心优势包括:1.响应式数据绑定,数据变化自动更新视图;2.组件化开发,UI可拆分为独立、可复用的组件。

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    SublimeText3 英文版

    SublimeText3 英文版

    推荐:为Win版本,支持代码提示!

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    mPDF

    mPDF

    mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境