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过滤器filters怎么用(如何使用vue过滤器filter)
- vue滑动切换页面(vue实现点击翻转效果)
- vue左右滑屏(vue中实现全屏以及对退出全屏的监听)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- ant design 的vue批量操作(ant desing vue table 实现可伸缩列的完整例子)
- vue项目步骤(Vue项目中常用的实用技巧汇总)
- 详解从vue的组件传值着手观察者模式(详解从vue的组件传值着手观察者模式)
- vue定时器中间变颜色(Vue如何优雅的清除定时器)
- vue实现添加一段代码功能(Vue实现动态查询规则生成组件)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue慢动作怎么操作(vue开发之moment的介绍与使用)
- vue购物车简单项目(vue实现简单购物车案例)
- vue使用websocket的详细步骤(vue使用webSocket更新实时天气的方法)
- vue组件方法里如何修改data(vue项目中使用rem替换px的实现示例)
- 被鉴定的古董价值300万 当心,你可能遇到诈骗了(被鉴定的古董价值300万)
- 英语难学吗(初中英语难学吗)
- 如何追女孩子(如何追女孩子的技巧和方法)
- 是不是快乐全被你拿走了(而是你得到的)
- 世界上只有妈妈好(世界上只有妈妈好的歌词)
- 为什么现在社会越来越卷了(现在社会为什么发展那么快呢)
热门推荐
- video tv cast怎么用(video下autoplay属性无效的解决方法添加muted属性)
- vue图片切换软件(Vue实现简单图片切换效果)
- docker容器启动执行多条命令(详解Shell脚本控制docker容器启动顺序)
- Oracle TO_CHAR的使用
- thinkphp5框架怎么打开(thinkphp5.1框架中容器Container和门面Facade的实现方法分析)
- blazor客户端访问串口(Blazor Server 应用程序中进行 HTTP 请求)
- 怎么用docker部署springboot项目(Spring Boot使用Docker分层打包的设置方法)
- asp.net使用swfupload上传
- ASP.NET实现FTP上传文件
- 阿里云centos系统安装tomcat(阿里云服务器Tomcat无法访问的问题)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9