vue中关于trigger的用法

目录
  • 关于trigger的用法
  • vue的一些易混淆事件整理 - @change | trigger: 'blur' |
    • onchange onpropertychange 和 oninput 事件的区别
    • @change
    • trigger: ‘blur’

关于trigger的用法

  • trigger: "blur": 失去焦点时触发
newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ]

当鼠标点击输入框外时显示“新密码不能为空”：

还有一个：

  • trigger: "change":  数据改变时触发，道理跟上面类似

vue的一些易混淆事件整理 - @change | trigger: 'blur' |

onchange onpropertychange 和 oninput 事件的区别

1、onchange 事件与 onpropertychange 事件的区别：

  • onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。
  • onpropertychange 事件却是实时触发，即每增加或删除一个字符就会触发，通过 js 改变也会触发该事件，但是该事件 IE 专有。

2、oninput 事件与 onpropertychange 事件的区别：

  • oninput 事件是 IE 之外的大多数浏览器支持的事件，在 value 改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过 js 改变 value 时，却不会触发。
  • onpropertychange 事件是任何属性改变都会触发的，而 oninput 却只在 value 改变时触发，oninput 要通过 addEventListener() 来注册，onpropertychange 注册方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容与行为分离）

3、oninput 与 onpropertychange 失效的情况：

  • （1）oninput 事件：a). 当脚本中改变 value 时，不会触发；b).从浏览器的自动下拉提示中选取时，不会触发。
  • （2）onpropertychange 事件：当 input 设置为 disable=true后，onpropertychange 不会触发。

@change

手动输入或者通过弹出框选择之后触发

@change='handleChange'

trigger: ‘blur’

  • trigger: ‘blur’ 表示“当失去焦点时（光标不显示的时候），触发此提示”

此处应该是有一个校验，若失去焦点，则触发trigger进行校验，若校验不成功，则进行提示

//组件
<el-form :model="form" :rules="rules" ref="groupForm"></el-form>
//JavaScript
rules:{
        code: [
          {required: true, message: '请输入！！！！！, trigger: 'blur'}
        ],
        name: [
          {required: true, message: '输入啊！！！！', trigger: 'blur'}
        ]
      }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3.0响应式函数原理详细

    目录 1.reactive 2.ref 3.toRefs 4.computed 前言: Vue3重写了响应式系统,和Vue2相比底层采用Proxy对象实现,在初始化的时候不需要遍历所有的属性再把属性通过defineProperty转换成get和set.另外如果有多层属性嵌套的话只有访问某个属性的时候才会递归处理下一级的属性所以Vue3中响应式系统的性能要比Vue2好. 接下来我们自己实现Vue3响应式系统的核心函数(reactive/ref/toRefs/computed/effect/trac

  • Vue新玩具VueUse的具体用法

    目录 前言 什么是 VueUse 简单上手 还有我们熟悉的 防抖 和 节流 还还有全局状态共享的函数 更多 前言 上次在看前端早早聊大会中, 尤大大再一次提到了 VueUse 的一个库. 好奇了一下,点看看了看.好家伙啊, 我直接好家伙.这不就是曾经我也想自己写一个  vue 版的 hooks 库吗?(因为我觉得 vue3 和 hooks 太像了) 可是我还不太会, 你现在直接把我的梦想给破灭了,下面我们一起来看看吧!VueUse 作者 Anthony Fu 分享可组合的 Vue_哔哩哔哩_bi

  • 在Vue项目中使用snapshot测试的具体使用

    snapshot介绍 snapshot测试又称快照测试,可以直观地反映出组件UI是否发生了未预见到的变化.snapshot如字面上所示,直观描述出组件的样子.通过对比前后的快照,可以很快找出UI的变化之处. 第一次运行快照测试时会生成一个快照文件.之后每次执行测试的时候,会生成一个快照,然后对比最初生成的快照文件,如果没有发生改变,则通过测试.否则测试不通过,同时会输出结果,对比不匹配的地方. jest中的快照文件以为snap拓展名结尾,格式如下(ps: 在没有了解之前,我还以为是快照文件是截图

  • vue中关于trigger的用法

    vue中关于trigger的用法

    目录 关于trigger的用法 vue的一些易混淆事件整理 - @change | trigger: 'blur' | onchange onpropertychange 和 oninput 事件的区别 @change trigger: ‘blur’ 关于trigger的用法 trigger: "blur": 失去焦点时触发 newPassword: [ { required: true, message: "新密码不能为空", trigger: "blu

  • vue 中filter的多种用法

    1.自定义的过滤器,当然这包括注册在全局和注册在实例化的内部 (1)注册在全局的fliter (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理 <!DOCTYPE html> <html> <head>

  • vue 中 命名视图的用法实例详解

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面里面可能有多个组件,比如侧边栏,内容区,侧边栏是一个组件.内容区是一个组件,我们普遍会将两个组件作为子组件添加到主页面中,因为页面中只有一个 router-view视图,那么问题来了,怎么让一个页面中有多个视图呢,拥有多个视图,很随意,多写几个router-view标签就行了,但是每个router-

  • 详解Vue中watch的详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: ''' <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } }) ''' 直接写一个监听处理函数,当每次监听到

  • vue中 v-for循环的用法详解

    1.v-for循环普通数组 ①创建vue对象 ② 循环数据 结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对象 结果: 4.v-for循环数字 ①创建vue对象实例 ②循环数字 结果: 5.v-for中key的使用方式 ①创建vue对象实例 注意:push()方法一般是添加到数组的最后的位置:unshift()方法是往最前面的位置添加. ②循环 注意: v-for循环的时候,key属性只能使用number

  • vue中插槽整理及用法分析

    本教程操作环境:windows7系统.vue2.9.6版,DELL G3电脑. vue的插槽(slot)主要分三种: 默认插槽,具名插槽,作用域插槽 vue中的插槽,指的是子组件中提供给父组件使用的一个占位符: 用标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML.组件等,填充的内容会替换掉子组件的标签(替换占位符). 默认插槽 默认插槽是最简单的一种插槽,和上面的描述一致,就是通过替换占位符达到在父组件中更改子组件中内容的效果. 语法: 在子组件中放置一个占位符(slot): <

  • Vue中axios的基本用法详解

    目录 1.什么是axios? 2.axios的特征 3.axios在使用的时候需要注意的细节 4.axios在vue中的实例运用(留言评论接口) App.vue代码 mian.js代码 1.什么是axios? axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端.简单的理解就是ajax的封装 2.axios的特征 从浏览器中创建 XMLHttpRequest    从 node.js 发出 http 请求    支持 Promise API    拦截请求和响应 

  • Vue 中v-model的完整用法及原理

    目录 一. v-model的基本使用 二. v-model的原理 三. v-model结合radio类型使用 四. v-model结合复选框类型使用 五. v-model结合select 六. v-model的修饰符的使用 一. v-model的基本使用 v-model双向绑定,既输入框的value改变,对应的message对象值也会改变,修改message的值,input的value也会随之改变.无论改变那个值,另外一个值都会变化. <!DOCTYPE html> <html lang

  • Vue中v-on的基础用法、参数传递和修饰符的示例详解

    一.v-on的基本用法 使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可以省掉,如上述的<button @click="increment">加</button>. 以简单的计数器为例 <body> <div id="app"> <h2>{{count}}</h2> <

  • 详解Vue中watch的高级用法

    假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' },

随机推荐