Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言:
网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码、邮件、区号、身份证号等。input框的不合法内容主要有两种方式处理:1.用户输入内容后,通过规则验证告知用户不合法,2.禁止输入不符合规则字符。下面基于第2种情况,针对Vue中的input控件通过自定义指令(directive),使用正则表达式限制input控件的输入。
工作流程:
input控件绑定v-model ---> 通过自定义指令(v-restrict)设定验证的正则表达式 ---> 监控控件的keyup、keydown、paste事件,验证字符合法性 ---> 替换非法字符 ---> 替换后的结果更新绑定到v-model的变量里
控件元素代码:
<v-text-field label="Test"
v-model="testtext"
v-restrict="/[^a-zA-Z0-9]/g"
</v-text-field>
自定义指令(directive)代码:
import Vue from "vue"; Vue.directive("restrict", {
bind(el, binding) {
const target =
el instanceof HTMLInputElement ? el : el.querySelector("input");
target.addEventListener("keydown", e => {
if (binding.value) {
// Regex check
if (binding.value.test(e.target.value)) {
e.target.value = e.target.value.replace(binding.value, "");
e.target.dispatchEvent(new Event("input"));//调用input事件使vue v-model绑定更新,下面相同
}
}
});
target.addEventListener("paste", e => {
if (binding.value) {
// Regex check
if (binding.value.test(e.target.value)) {
e.target.value = e.target.value.replace(binding.value, "");
e.target.dispatchEvent(new Event("input"));
}
}
});
target.addEventListener("keyup", e => {
if (binding.value) {
// Regex check
if (binding.value.test(e.target.value)) {
e.target.value = e.target.value.replace(binding.value, "");
e.target.dispatchEvent(new Event("input"));
}
}
});
} // end bind
}); // end directive
v-model本质及实现原理
通过下面两行代码给input输入框绑定值并添加事件钩子:
其实就是动态绑定了 input 的 value 指向了 messgae 变量,并且在触发 input 事件的时候去动态把 message 设置为目标值,这样实际上就完成了数据双向绑定了,所以说 v-model 实际上就是语法糖。
Vue template code:
<v-text-field label="Test"
v-model="testtext"
@keyup="testkeyup($event)">
<v-icon medium
slot="append"
@click.native="test()">save</v-icon>
</v-text-field> Vue script code:
data{testtext: "zsl"}
methods: {
test() {
this.testtext += "a";
},
testkeyup(e) {
e.target.value += "b";
var eventb = new Event("input");
e.target.dispatchEvent(eventb);
console.log(
"e.target.value: " +
e.target.value +
" | this.testtext: " +
this.testtext
);
}
}
获取某元素绑定的所有事件(Listener)
通过Chrome中,在Console窗口里,通过window.getEventListeners(obj)获取某个元素绑定的所有事件(listener)
e.target.value的修改(change)不会自动调用vue的input方法,通过dispatchEvent的方式手动调用
e.target.dispatchEvent(new Event("input"));
Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入的更多相关文章
- vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularjs - 自定义指令(directive)
自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...
- vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...
- vue 自定义指令directive
//自定义指令:directive 的传参--可以数据也可以是字符串 Vue.directive('scroll', function (binding) { window.addEventListe ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue(九)---自定义指令(directive )
1.无参数 自定义指令的方式:1. 使用Vue.directive 来自定义2. 第一个参数就是 指令名称 xart3. el 表示当前的html dom对象4. 在方法体内就可以通过 innerHT ...
- vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- VUe键盘修饰符及自定义指令获取焦点
首先需要在keyup事件之后. 修饰符 来绑定事件 <body> <div class="box"> <!-- 这里的 @keyup.enter=&q ...
随机推荐
- python3 准备
一.前言 1.Python是著名的“龟叔”Guido van Rossum发明的 2.python分为python2和python3两大版本,python2渐渐被淘汰,建议使用python3 3.py ...
- pipenv安装报错ReadTimeoutError
原因:pip下载源默认设置为国外 解决:将pip下载源切换为国内地址 操作: 在C:\Users\Administrator\下新建pip文件夹,在创建pip.ini文件,拷贝下面代码进去,保存 切换 ...
- .Net优秀应用界面大PK!DevExpress年度大赛,群雄逐鹿花落谁家
DevExpress 优秀界面图片火热征集中! 只要您晒出来,慧都就为您颁奖! 角逐前三,百度AI音箱.小米行李箱等惊喜大礼等您Pick! 活动时间:12月1日-12月31日 立即参与 活动详情 活动 ...
- 关于EMF中从schema到ecore转变中的默认处理问题
以前的工作,建模基本都是通过ecore tool直接画ecore的模型图来完成,最近要从schema创建ecore文件,本来以为是非常简单的一件事情,使用向导创建genmodel,然后从xsd文件导入 ...
- C# List<T> 集合使用
1.初始化集合 , ); , ); , ); ) { graham, emerson, mario }; 2. 添加元素 racers.Add(, )); racers.Add(, )); racer ...
- Nginx:Nginx概要
简介 nginx是俄罗斯开源的HTTP和代理服务,也可以作邮件服务器. 核心功能: 1.正向代理:客户机的请求先到达nginx,再由nginx代理访问互联网资源 2.反向代理:客户机请求互联网,到达n ...
- 第二章 C#语法快速热身
C#语法快速热身 语法 if(条件表达式){ 代码块 } 语法 if(条件表达式){ 代码块 }else{ 代码块2 } 语法 if(条件表达式1){ 代码块1 if(条件表达式1)){ }else{ ...
- Flutter布局5---Container
Container 容器 简介一个常用的widget,它结合了常见的绘画,定位和大小调整·该容器首先让child填充绘制,然后再将其他的约束应用于填充范围.·在绘画过程中,容器先应用给定的转换,再绘制 ...
- mysql日期相减取小时
mysql日期相减取小时 TIMESTAMPDIFF(HOUR,a.StartTime,a.EndTime)
- Oracle 物理结构(七) 文件-归档日志文件
Oracle 物理结构(七) 文件-归档日志文件