Vue vee-validate插件的简单使用


Posted in Vue.js onJune 22, 2021
目录
  • 1.安装
  • 2.导入
  • 3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)
  • 4.使用Form组件配置校验规则和错误对象 (form 和 Field都是从插件中按需导出)
  • 5.使用 Field 组件,添加表单项目校验
  • 6.补充表单数据和验证规则数据

 

1.安装

npm i vee-validate@4.0.3

 

2.导入

import { Form, Field } from 'vee-validate'

 

3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)

// 创建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
  }
}

 

4.使用Form组件配置校验规则和错误对象 (form 和 Field都是从插件中按需导出)

// 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>

 

5.使用 Field 组件,添加表单项目校验

//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="请输入用户名" /> -->

 

6.补充表单数据和验证规则数据

// 表单绑定的数据
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.js 相关文章推荐
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Vue过滤器(filter)实现及应用场景详解
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 #Vue.js
Vue中插槽slot的使用方法与应用场景详析
vue+elementui 实现新增和修改共用一个弹框的完整代码
You might like
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
javascript正则表达式总结
2016/02/29 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
如何在python中实现随机选择
2019/11/02 Python
基于python中__add__函数的用法
2019/11/25 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
Python远程linux执行命令实现
2020/11/11 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
工商管理实习自我鉴定
2013/09/28 职场文书
中文师范生自荐信
2014/01/30 职场文书
新农村建设典型材料
2014/05/31 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
如何判断pytorch是否支持GPU加速
2021/06/01 Python
Go语言空白表示符_的实例用法
2021/07/04 Golang
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS