vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
类别:编程学习 浏览量:554
时间:2021-10-28 10:55:35 vuejs组件使用教程交流
Vue vee-validate插件的简单使用目录
- 1.安装
- 2.导入
- 3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)
- 4.使用Form组件配置校验规则和错误对象 (form 和 Field都是从插件中按需导出)
- 5.使用 Field 组件,添加表单项目校验
- 6.补充表单数据和验证规则数据
npm i vee-validate@4.0.3
import { Form, Field } from 'vee-validate'
// 创建js文件进行导出 export default { // 校验项account account (value) { if (!value) return '不能为空'// 条件判断, return true // 最后全部通过必须return true }, password (value) { if (!value) return '请输入密码' if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符' return true }, mobile (value) { if (!value) return '请输入手机号' if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误' return true }, code (value) { if (!value) return '请输入验证码' if (!/^\d{6}$/.test(value)) return '验证码是6个数字' return true }, isAgree (value) { if (!value) return '请勾选同意用户协议' return true } }
// validation-schema="mySchema" 配置校验规则 // v-slot:导出错误对象 <Form :validation-schema="mySchema" v-slot="{ errors }" > <!-- 表单元素 --> </Form> <script> import schema from '@/utils/vee-validate-schema' setup () { // 表单对象数据 const form = reactive({ account: null, // 账号 password: null // 密码 }) // 校验规则对象 const mySchema = { account: schema.account, password: schema.password } return { form, mySchema } } </script>
//1. 把input改成 `Field` 组件,默认解析成input //2. `Field` 添加name属性,作用是指定使用schema中哪个校验规则 //3. `Field`添加v-model,作用是提供表单数据的双向绑定 //4. 发生表单校验错误,显示错误类名`error`,提示红色边框 <Field v-model="form.account" name="account" type="text" placeholder="请输入用户名" :class="{ error: errors.account }" // 如果返回错误信息,为true 显示类error /> <!-- <input type="text" placeholder="请输入用户名" /> -->
// 表单绑定的数据 const form = reactive({ account: null, // 账号 password: null, // 密码 isAgree: true // 是否选中 }) // 声明当前表单需要的校验数据规则 const curSchema = reactive({ account: schema.account, // 账号 password: schema.password, // 密码 isAgree: schema.isAgree // 是否选中 })
以上就是Vue vee-validate插件的简单使用的详细内容,更多关于Vue vee-validate插件的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue滚动条滚动事件(vue实现一个滚动条样式)
- vue-router的两种模式(vue-route路由管理的安装与配置方法)
- 详解Vue3中Teleport的使用(详解Vue3中Teleport的使用)
- vue 中后台管理系统(Vue实现学生管理功能)
- vue的路由模式有几种(Vue 路由返回恢复页面状态的操作方法)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- vue项目部署到服务器的nginx(Nginx部署vue项目和配置代理的问题解析)
- vue插槽的分类(vue具名插槽的基本使用实例)
- vue 排班安排(vue实现钉钉的考勤日历)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- vue3函数详解(手把手教你用vue3开发一个打砖块小游戏)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- 秦海璐一袭旗袍惹人倾心,将高级与淡雅展现的游刃有余(秦海璐一袭旗袍惹人倾心)
- 门外之见 海蛎子味 的表演,能走多远(门外之见海蛎子味)
- 三部冷门谍战剧,第一部2014年拍摄,至今还未播出(三部冷门谍战剧)
- 《金陵秘事》的剧情跌宕起伏 给观众带来的怎样的感官体验(金陵秘事的剧情跌宕起伏)
- 少儿口才表达影响未来一生,50首经典绕口令和孩子玩出聪明大脑(少儿口才表达影响未来一生)
- 玩网游居然让人更友善 很难以让人置信(玩网游居然让人更友善)
热门推荐
- 海外云服务器的优势是什么?(海外云服务器的优势是什么?)
- SQL SERVER 数据库外键
- laravel连接多个数据库(laravel实现一个上传图片的接口,并建立软链接,访问图片的方法)
- navicat中如何使用sql语句(Navicat Premium操作MySQL数据库执行sql语句)
- UrlHelper、HtmlHelper的使用
- python数字形式转换详解(Python3.5实现的罗马数字转换成整数功能示例)
- sqlserver替换脚本(SQL Server中对数据截取替换的方法详解)
- python 循环遍历新方法(python for 循环获取index索引的方法)
- css子块级元素有用吗(css中行内元素和块级元素的区别)
- table单元格固定宽度
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9