Vue 表单验证

已于 2023-12-07 11:26:03 修改
阅读量159 收藏 1
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2023-12-07 11:21:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46515691/article/details/134850262
版权

今天在学习 Vue 的过程中用到了表单验证功能，这里简单记录下实现过程。

前端页面

登录界面如下所示，要实现的效果为鼠标离开文本框时，文本框自动校验是否满足用户名和密码的校验规则，这里要求的规则是长度为 5~16 非空字符串，如果需要其他规则可按需定义。
登录界面

自定义校验规则

要实现校验，首先需要定义校验规则，其中 rules 为表单校验规则，其中的 username, password, rePassword 为需要校验的字段。因为这些字段是需要发送给后端的，所以为方便起见，建议和后端传参是的变量名一致。
checkRePassword 需要在 rules 前面定义，否则不生效。

required: true //表示该字段必须要填写
message: ‘请输入用户名’ //表示若没有填写该字段，出现的提示信息
trigger: ‘blur’ //表示当前表单失焦了，该表单就开始校验
min:5 //所需要的最小长度
max: 16 //最大长度
message: ‘长度为5~16位非空字符串’ // 若不满足min 或 max 条件出现的提示信息

// 定义校验密码的规则
<script setup>
    const checkRePassword = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'))
        }
        else if (value !== registerData.value.password) {
            callback(new Error('两次输入密码不一致'))
        }
        else {
            callback()
        }
    }
    // 定义表单验证规则
    const rules = {
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min:5, max: 16, message: '长度为5~16位非空字符串', trigger: 'blur'}
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, max: 16, message: '长度为5~16位非空字符串', trigger: 'blur'}
        ],
        rePassword: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
            { validator: checkRePassword, trigger: 'blur'}
        ] 
    }
</script>

当需要一些复杂的验证条件时也可通过正则表达式来实现，例如

<script setup>
const rules = {
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/, min:5, max: 16, message: '长度为5~16位非空字符串', trigger: 'blur'}
        ]
    }
</script>

绑定元素

在 标签上添加 :rules 属性，值为上面定义的校验规则名字；在需要校验的表单项里面(这里为)添加 prop 属性，值为相对应的校验规则里面的名字。

<!-- 注册表单 -->
 <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">
     <el-form-item>
         <h1>注册</h1>
     </el-form-item>
     <el-form-item prop="username">
         <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
     </el-form-item>
     <el-form-item prop="password">
         <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
     </el-form-item>
     <el-form-item prop="rePassword">
         <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
     </el-form-item>
     <!-- 注册按钮 -->
     <el-form-item>
         <el-button class="button" type="primary" auto-insert-space>
             注册
         </el-button>
     </el-form-item>
     <el-form-item class="flex">
         <el-link type="info" :underline="false" @click="isRegister = false">
             ← 返回
         </el-link>
     </el-form-item>
 </el-form>

效果

在这里插入图片描述

完整登录界面代码

<script setup>
    import { User, Lock } from '@element-plus/icons-vue'
    import { ref } from 'vue'
    //控制注册与登录表单的显示， 默认显示注册
    const isRegister = ref(false)

    // 定义数据模型
    const registerData = ref({
        username: '',
        password: '',
        rePassword: ''
    })

    // 定义校验密码的规则
    const checkRePassword = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'))
        }
        else if (value !== registerData.value.password) {
            callback(new Error('两次输入密码不一致'))
        }
        else {
            callback()
        }
    }
    // 定义表单验证规则
    const rules = {
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min:5, max: 16, message: '长度为5~16位非空字符串', trigger: 'blur'}
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, max: 16, message: '长度为5~16位非空字符串', trigger: 'blur'}
        ],
        rePassword: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
            { validator: checkRePassword, trigger: 'blur'}
        ] 
    }
</script>

<template>
    <el-row class="login-page">
        <el-col :span="12" class="bg"></el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 注册表单 -->
            <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules">
                <el-form-item>
                    <h1>注册</h1>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
                </el-form-item>
                <el-form-item prop="rePassword">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
                </el-form-item>
                <!-- 注册按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space>
                        注册
                    </el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="isRegister = false">
                        ← 返回
                    </el-link>
                </el-form-item>
            </el-form>
            <!-- 登录表单 -->
            <el-form ref="form" size="large" autocomplete="off" v-else :model="registerData" :rules="rules">
                <el-form-item>
                    <h1>登录</h1>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
                </el-form-item>
                <el-form-item class="flex">
                    <div class="flex">
                        <el-checkbox>记住我</el-checkbox>
                        <el-link type="primary" :underline="false">忘记密码？</el-link>
                    </div>
                </el-form-item>
                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space>登录</el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="isRegister = true">
                        注册 →
                    </el-link>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped>
/* 样式 */
.login-page {
    height: 100vh;
    background-color: #fff;

    .bg {
        background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
            url('@/assets/login_bg.jpg') no-repeat center / cover;
        border-radius: 0 20px 20px 0;
    }

    .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        user-select: none;

        .title {
            margin: 0 auto;
        }

        .button {
            width: 100%;
        }

        .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
有一个好名字
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 表单验证按钮事件交由父组件触发的方法
12-29
vue 表单验证按钮事件交由父组件触发，不直接再子组件上操作的方法 子组件： //内容部分 <Form ref=formCustom :model=formCustom :rules=ruleCustom :label-width=80> <Input type=text v-model=...
vue表单输入最小值min-最大值max，带区间校验
u013486113的博客
01-03 865
最大值：1000000；
vue表单验证
梦之归途的博客
02-08 1131
【代码】vue表单验证。
vue 表单验证
weixin_55782474的博客
04-12 2499
1、6位小写字母和数字必须包含两个字母 rules: [ { required: true, message: "XXX不能为空", trigger: "blur" }, { max: 6, message: "最大长度为6位字符", trigger: "blur" }, { pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母 // /^(?=.
vue 表单验证并提交
qq_39236283的博客
12-23 9184
vue 表单验证并提交一、常用验证方式1.data 中验证data 数据：2.行内验证3.引入外部定义的规则二、表单提交时验证1.表单的提交按钮2.ethods 方法 一、常用验证方式 vue 中表单字段验证的写法和方式有多种，常用的验证方式有3种： 1.data 中验证 表单内容： <!-- 表单 --> <el-form ref="rulesForm" :rules="fo...
vue 表单验证正则_vue elementUI如何自定义表单验证规则
weixin_30205153的博客
01-15 1732
一、elementUI自带了一部分表单验证规则，本文讲解如何使用自定义验证规则来完成密码的二次验证。1.1、首先添加验证邮箱和电话规则和正则表达式//验证邮箱的规则varcheckEmail=(rule,value,cb)=>{//邮箱正则表达式constregEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9...
VUE表单验证.txt
01-13
文档包含了常见的表单验证规则，包括是否合法IP地址、是否手机号码或者固话、是否固话、是否手机号码、是否身份证号码、是否邮箱、合法url、自动检验数值的范围、验证数字输入框最大数值、验证是否1-99之间、验证...
vue表单验证插件
08-10
在使用vue做项目的过程中，做表单验证通常需要事件绑定、数据双向绑定等才能完成一个验证操作，多个验证往往会有重复代码，所以就想写一个表单验证插件。
Vue表单验证插件Vue Validator使用方法详解
08-30
主要为大家详细介绍了Vue表单验证插件Vue Validator使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue表单验证组件vverifyplugin
08-10
vue表单验证组件 v-verify-plugin
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 671
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1110
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 352
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1040
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。
基于Vue3 + js-tool-big-box工具库实现3个随机数字的小游戏动画，快来挑战你的非凡手气！
xingyu_qie的专栏
05-17 836
基于Vue3 + js-tool-big-box的3个随机数字
VueScan Pro中文
最新发布
CSDN专家-微编程的博客
05-19 242
VueScan Pro中文是一款VueScan图像扫描软件,提供色彩平衡和颜色校正功能,适用于6500多台扫描仪,VueScan破解版内置驱动,可以对扫描仪软件反向工程,支持200种以上的底片类型,复杂的白色平衡算法,用于检查物体表面暇疵的红外线底片扫描,成批扫描,自动剪取图像等等,提高扫描仪的扫描速度和工作效率.
vue 使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超一秒时自动切换到对应分区
weixin_45956838的博客
05-17 561
使用draggable拖拽实现响应式侧边栏，拖拽数据悬停在侧边栏分区超过一秒自动切换到对应分区
vue 表单验证手机号
05-11
Vue 表单验证手机号可以通过以下步骤来实现： 1. 首先在 HTML 中定义一个手机号的输入框，可以使用 `<input>` 标签，例如： ```html 请输入手机号"> ``` 2. 在 Vue 的 data 中定义 phone 变量，并初始化为空： `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值