vue指令控制input(输入框)限制两位小数、输入正整数、输入最大值限制、输入时添加正则限制、限制输入中文或者英文等

codepen体验地址

因为最近在尝试用vite做新项目,兼容vue3.0指令的变动,也把该功能发布到npm上了,大家用的时候可以npm下载了

本次更新兼容了vue3.0

利用compositionstart和compositionend优化了vue update导致重复绑定监听方法

添加了blur事件监听,否则用户用鼠标右键粘贴可越过指令的限制

具体用法可以看一下github地址

觉得不错可以点个小星星谢谢哈

用法

已兼容vue3.0

npm install vue-input-directive --save
import Vue from 'vue'
import inputValidate from 'vue-input-directive'
Vue.use(inputValidate)

1.d-input-max

输入数字限制最大值

 <el-input v-d-input-max="99.99" v-model="value"></el-input>

2.d-input-int

只能输入正整数

 <el-input v-d-input-int v-model="value"></el-input>

3.d-input-point2

最多只能输入两位小数

 <el-input v-d-input-point2 v-model="value"></el-input>

4.d-input-en

只能输入英文

 <el-input v-d-input-en v-model="value"></el-input>

5.d-input-regexp

限制正则内容,输入时若正则部分匹配,则把匹配的部分留下,其余清空 实际上上面4种除了输入两位小数以外其他3个都可以用正则替代

<!-- 限制不能输入中文 -->
 <el-input v-d-input-regexp="/((?![\u4E00-\u9FA5]).)*/" v-model="value"></el-input>
<!-- 限制仅可输入数字字母 -->
 <el-input v-d-input-regexp="/[0-9A-Za-z]*/" v-model="value"></el-input>

6.混合使用

<!-- 限制输入两位小数 最大可输入99.99 -->
 <el-input 
  v-d-input-point2
  v-d-input-max="99.99"
  v-model="value"></el-input>

7.自定义正则

只能输入数字和字母和中文

import Vue from 'vue'
import {DinitFun} from 'vue-input-directive'
// 只能输入数字和字母
Vue.directive(
  'd-input-num-en',
  DinitFun((ele, binding) => {
      let value = ele.value + ''
      const reg = /[a-zA-Z0-9\u4E00-\u9FA5]*/
      const matchRes = value.match(reg)
      if (matchRes) {
        value = matchRes[0]
      } else {
        value = ''
      }
      ele.value = value
  })
)
  • 8
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值