input失去焦点验证格式_vue2多文本框的表单校验(3)-失去焦点触发校验

vue2多文本框的表单校验(3)-失去焦点触发校验

第一步,在子组件中

blur 事件中派发 blur

@blur="blur2($event.target.value)" @input="inputAction($event.target.value)"

v-bind:name="nam" :value="value" class="inf-input" :class="className"

type="text" :placeholder="placeholder"

autocomplete="off"/>

import sharedStateMixin from '@/services/status/sharedState.mixin'

export default {

mixins: [sharedStateMixin],

props: ['nam', 'className', 'value', 'v_validate', 'data_vv_as', 'placeholder', 'haserror', 'errormessage', 'clicksubmit'],

methods: {

inputAction: function (val2) { //keyup

// this.val = val2

// this.value = val2

this.$emit('input', val2)

// this.$emit('blur', val2)//才真正触发this.value的改变

console.log('this.value', this.value)

this.sharedState.bus.$emit('clearInputError',this.nam);

blur2: function (val) {

// 没用 this.val = val //如果缺少,那么ajax 设置data中的变量时,校验不通过,校验认为没有输入

// this.value = val

this.$emit('blur', val)

}

与输入中即时校验有两点区别:

1,this.$emit('blur', val) 没有放在 input 事件中,而是放在 blur 中.

2,即时校验没有派发clearInputError 事件

父组件中注册clearInputError事件:

this.sharedState.bus.$on('clearInputError',function (name) {

console.log('clear error:',name)

this.errors && this.errors.remove(name)

}.bind(this))

}

请参考我的前几篇博客:

vue2多文本框的表单校验(1)-提交时才校验

vue2多文本框的表单校验(2)-输入中即时校验

input失去焦点验证格式_vue2多文本框的表单校验(3)-失去焦点触发校验相关推荐

input失去焦点验证格式_在文本框的onblur事件里写验证信息
html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...
原生js赋值html,原生js文本框赋值点击文字给text文本框赋值表单提交
特效描述:文本框赋值文本框赋值表单表单提交. 代码结构 1. HTML代码菜单导航时间日期焦点图 tab标签 jquery特效在线客服官网 js代码 var x=["菜单导航& ...
html 文本框css样式,13种常用按钮、文本框、表单等CSS样式
虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果. 一.按钮样式以下为引用的内容: Example So ...
HTML表单事件，获取焦点时、失去焦点时、即将获取焦点时、即将失去焦点时、输入值时、选取文本时、表单元素的内容改变时、提交时....
表单事件简介 onfocus 元素获取焦点时触发 onblur 元素失去焦点时触发 onfocusin 元素即将获取焦点时触发 onfocusout 元素即将失去焦点时触发 oninput 元素获取用 ...
编写一程序，有2个文本框，在第一个文本框中输入一个整数，当焦点从第一个文本框离开时，第二个文本框将显示这个数的绝对值（使用FocusListener）。
编写一程序,有2个文本框,在第一个文本框中输入一个整数,当焦点从第一个文本框离开时,第二个文本框将显示这个数的绝对值(使用FocusListener). import javax.swing.*; i ...
零基础前端笔记（2）html，表格，列表，标签，文本域，表单域
XHTML可扩展超文本标记语言(2) (1)创建表格 (2)表格属性表头单元格标签th 表格标题caption 小说排行榜 (3)合并单元格 (4)划分表格结构 (5)列表标签无序列表有序列表 ...
bootstrap的表单验证 vue_第45天：Web表单
在了解了 Flask Bootstrap 基本框架之后,我们来了解一下 Flask 框架的表单( form ),以帮助我们创建交互式的 Web 应用,最后会有个提交个人信息的例子. Flask-WT ...
表单输入框自动获得焦点自动获焦+一些实体字符
自动获焦:autofocus,比如百度浏览器直接打卡,光标就在输入框内闪烁,这就是自动获焦. 但如果输入框不是网页的主要功能,就不要用自动获焦. 与后面的focus()方法来获得焦点相对比,自动获焦一 ...
非表单元素如何使用焦点事件
在前端开发中,常用的焦点事件有focus和blur. 来看看在菜鸟教程(https://www.runoob.com/jsref/met-html-focus.html)中的介绍: focus() 方 ...

input失去焦点验证格式_vue2多文本框的表单校验(3)-失去焦点触发校验

input失去焦点验证格式_vue2多文本框的表单校验(3)-失去焦点触发校验相关推荐

最新文章

热门文章