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中什么时候需要set属性(Vue.set和this.$set使用和区别)
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- vue离线地图有哪些(vue 集成腾讯地图实现api附DEMO)
- vue中的指令及用法(详解Vue进阶构造属性)
- vue做个人页面(vue简易记事本开发详解)
- vue图片切换软件(Vue实现简单图片切换效果)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- vue代码统计(Vue实现计数器案例)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vue左右联动列表(vue+iview的菜单与页签的联动方式)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- vue-router底层实现原理(vue-router history模式服务器端配置过程记录)
- 写信告诉我今天海是什么颜色(写信告诉我今天海是什么颜色回答)
- 英语难学吗(法语比英语难学吗)
- 今天要吃什么(今天要吃什么菜好)
- 网红直播可以赚很多钱吗(网红直播可以赚很多钱吗)
- 今天是什么日子(今天是什么日子有什么特殊意义吗)
- 这里输入关键词(怎么输入关键词搜索)
热门推荐
- python3yield使用教程(python中yield的用法详解——最简单,最清晰的解释)
- sql server重建索引
- JSON中的特殊字符
- C#中hashtable 的使用方法
- dedecms栏目列表(dedecms子栏目中调用其顶级栏目名称和简介的方法)
- mysql删除的delete怎么找回(MySQL Delete 删数据后磁盘空间未释放的原因)
- docker compose 与docker区别(windows安装Docker与docker-compose套装的详细教程)
- mysql自增长语句(mysql实现自增序列的示例代码)
- 虚拟机安装centos8网络设置(VMware安装CentOS虚拟机与配置网络的图文教程)
- 前端单行文本垂直居中(移动端的text-overflow多行文本溢出显示省略号…)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9