前端开发最常碰到的就是输入框,经常要做各种验证,本公司惯用的需求是直接屏蔽特定字符的输入,如禁止非数字输入,特殊符号输入,空格输入等,这些功能反复使用,做成指令的形式,直接调用,非常方便,上代码:

目录结构很简单:

  1、项目文件夹里新建directives文件夹,所有指令都放在这个文件夹里

  2、input-filter文件夹放具体指令,在其下建两个文件:

    a、inputFilter.js实现主体功能

    b、index.js负责封装,职责分明

inputFilter.js代码:

/**
* 实现功能
* 1、默认情况下只禁止空格输入
* 2、限制只能输入整数
* 3、限制只能输入整数和小数(价格类)
* 4、限制只能输入手机号
* 5、限制最大值和最小值(抛出错误给回调函数)
*/
const addListener = function(el, type, fn) {
el.addEventListener(type, fn, false)
}
const spaceFilter = function(el) {
addListener(el, 'keyup', () => {
el.value = el.value.replace(/\s+/, '')
})
}
const intFilter = function(el) {
addListener(el, 'keyup', () => {
el.value = el.value.replace(/\D/g, '')
})
}
const priceFilter = function(el) {
addListener(el, 'keyup', () => {
el.value = el.value.replace(/[^\d.]*/g, '')
if (isNaN(el.value)) {
el.value = ''
}
})
}
const specialFilter = function(el) {
addListener(el, 'keyup', () => {
el.value = el.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '')
})
}
const phoneFilter = function(el) {
addListener(el, 'blur', () => {
if (!el.value) {
return
}
const phoneReg = new RegExp('^(13|14|15|16|17|18|19)[0-9]{9}$')
if (!phoneReg.test(el.value)) {
alert('手机号输入错误')
el.value = ''
}
})
}
const urlFilter = function(el) {
addListener(el, 'blur', () => {
if (!el.value) {
return
}
const urlReg = /(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/
if (!urlReg.test(el.value)) {
alert('url输入错误')
el.value = ''
}
})
}
export default {
bind(el, binding) {
if (el.tagName.toLowerCase() !== 'input') {
el = el.getElementsByTagName('input')[0]
}
spaceFilter(el)
switch (binding.arg) {
case 'int':
intFilter(el)
break
case 'price':
priceFilter(el)
break
case 'special':
specialFilter(el)
break
case 'phone':
phoneFilter(el)
break
case 'url':
urlFilter(el)
break
default:
break
}
}
}

  

index.js代码:

import inputFilter from './inputFilter'

const install = function(Vue) {
Vue.directive('inputFilter', inputFilter)
} if (window.Vue) {
window.inputFilter = inputFilter
Vue.use(install)
} inputFilter.install = install
export default inputFilter

  

组件引用:

import inputFilter from '@/directives/input-filter/index.js'  // 引入

<el-input v-input-filter v-model="inputSpaceFilter" placeholder="空格无法输入"></el-input>
<el-input v-input-filter:int v-model="inputIntFilter" placeholder="只能输入整数"></el-input>
<el-input v-input-filter:price v-model="inputPriceFilter" placeholder="只能输入价格"></el-input>
<el-input v-input-filter:special v-model="inputSpecialFilter" placeholder="过滤特殊字符"></el-input>
<el-input v-input-filter:phone v-model="inputPhoneFilter" placeholder="只能输入手机号"></el-input>
<el-input v-input-filter:url v-model="inputUrlFilter" placeholder="只能输入网址"></el-input> export default {
directives: {
inputFilter
}
}

  

  

效果图:

vue指令应用--实现输入框常见过滤功能的更多相关文章

  1. vue货币格式化组件、局部过滤功能以及全局过滤功能

    一.在这里介绍一个vue的时间格式化插件: moment 使用方法: .npm install moment --save. 2 定义时间格式化全局过滤器 在main.js中 导入组件 import ...

  2. Vue | 指令实现自动翻译填充英文名功能

    背景:应用系统中存在多个创建实体表单,表单填写时,在填写中文名称后,要填写对应的英文名作为标识或数据库查询索引. 需求:填写中文名的同时,系统自动生成英文名并填充到表单中,辅助用户操作,节约操作时间. ...

  3. vue.js代码开发最常见的功能集合

    1:点击新增按钮跳出新页面 <span class="inquire" @click="addNew">新增</span> 在方法中,添 ...

  4. vue指令v-html中使用过滤器filters功能

    Vue 2.0 不再支持在 v-html 中使用过滤器 解决方法: 1:全局方法(推荐) 2:computed 属性 3:$options.filters(推荐) 1:使用全局方法: 可以在 Vue ...

  5. 【vuejs深入一】深入学习vue指令,自定义指令解决开发痛点

    写在前面  一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 最近博主我沉淀了几个月,或者说懒了几个月.然而大佬的指点总是一针见血,能够让人看到方向.所以我现在有觉得,一个好的 ...

  6. 深入学习vue指令,自定义指令解决开发痛点

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code v-model指令 vue.js的定义是一个mvvm框架,将它发挥到极致能够极大的提升 ...

  7. 转--Android实现ListView过滤功能,继承于BaseAdapter,非ArrayAdapter。

    其实实现ListView过滤功能最方便的便是使用ArrayAdapter,里面自带的getFilter()方法能很方便的实现此功能,但是在实际的开发中,一般都是继承于BaseAdapter.还有一种是 ...

  8. 第三篇:Vue指令

    Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...

  9. Vue指令及自定义指令的使用

    导航列表: 一.vue指令 二.自定义指令 一.vue指令 回到顶部    1. v-text v-text主要用来更新textContent,可以等同于JS的text属性,不会解析标签,会把标签解析 ...

随机推荐

  1. 设置select组件中的默认值

    会员卡类型   <select id="name2" style="width:140px"> <option value="Ak& ...

  2. vim-插入格式化时间

    最近一直在搞vimrc的配置.其中有一点就是,我想要实现代码快速注释的功能.而这个功能中的一个关键点就是,我要获得系统当前的时间,然后插入到我的注释里面.我知道vimrc支持shell命令,既使用:r ...

  3. js的style和getArribute("属性名")

    getAttribute()是HTML DOM的一个方法,用以获取HTML元素的属性(如id,name,type以及其他自定义属性). style是HTML DOM的一个关于样式的对象,style对象 ...

  4. SSH远程快速登录Linux

    SSH远程快速登录Linux        使用SSH管理linux服务器,通常要使用ssh,然后输入用户,密码,其实只要配置一个文件就可以方便登录.假设要登录server域名是www.interne ...

  5. string StartsWith 方法 Https

    public ActionResult Index()        {            string url = "Https://www.baodu.com";      ...

  6. 阅读笔记—EL表达式

    表达式语言(EL) 表达式语言是一种在JSP页面中使用的数据访问语言,通过它可以很方便地在JSP页面中访问应用程序数据. 使用EL访问数据 表达式语言的使用形式:              ${exp ...

  7. Android线程池(二)——ThreadPoolExecutor及其拒绝策略RejectedExecutionHandler使用演示样例

    MainActivity例如以下: package cc.vv; import java.util.concurrent.LinkedBlockingQueue; import java.util.c ...

  8. struts2中action手动获取參数

    struts2中action手动获取Session,jsp页面參数 1. ActionContext 在Struts2开发中,除了将请求參数自己主动设置到Action的字段中,我们往往也须要在Acti ...

  9. SSH密码错误几次后封禁登录IP

    #!/bin/bash yum -y install vixie-cron crontabs mkdir -p /usr/local/cron/ cat > /usr/local/cron/ss ...

  10. Flume的Events

    Flume NG传输的数据的基本单位是event,如果是文本文件,通常是一行记录,这也是事务的基本单位.