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+iview实现分页及查询功能
Nov 17 Vue.js
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue如何清空对象
Mar 03 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
VUE递归树形实现多级列表
Jul 15 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中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php微信支付之APP支付方法
2015/03/04 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
python pygame实现2048游戏
2018/11/20 Python
python提取log文件内容并画出图表
2019/07/08 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Django框架models使用group by详解
2020/03/11 Python
python selenium操作cookie的实现
2020/03/18 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
副总经理任命书
2014/06/05 职场文书
护理医院见习报告
2014/11/03 职场文书
2014年教研员工作总结
2014/12/23 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏