【限制输入框值类型】自定义指令el-input输入类型限制,vue和html两个版本
前言
经常遇到输入框需要限制只能输入数字的,
因为用户很离谱,明显输入数字的地方他非要输入英文或者中文
但是用到UI框架或者自己写方法验证表单比较麻烦
为了一个输入框专门去弄一个验证很麻烦
所以这里就整合了两种自定义指令的方式,更加方便使用
vue版本和 html版本都有。
vue版本自定义指令写法
1,弄一个input.js文件复制下面代码
export default {bind(el, binding, vnode) {const input = el.querySelector('.el-input__inner') || el.querySelector('.el-textarea__inner') || el;input.addEventListener('compositionstart', () => {vnode.locking = true//解决中文输入双向绑定失效})input.addEventListener('compositionend', () => {vnode.locking = false//解决中文输入双向绑定失效input.dispatchEvent(new Event('input'))})//输入监听处理input.onkeyup = () => {if (vnode.locking) {return;}// v-input.numif (binding.modifiers.num) {//只能输入数字(开头可以多个0)onlyNum(input);}//v-input.num_pointelse if (binding.modifiers.num_point) {//只能输入数字+小数点(可以多个小数点)onlyNumPoint(input)}//v-input.floatelse if (binding.modifiers.float) {//只能输入浮点型(只能一个小数点)onlyFloat(input, binding.value)}// v-input.intelse if (binding.modifiers.int) {//只能输入整数(0+正整数)(开头不能多个0)onlyInt(input)}//v-input.intpelse if (binding.modifiers.intp) {//只能输入正整数onlyIntp(input)}//v-input.alpelse if (binding.modifiers.alp) {//只能输入字母onlyAlp(input)}//v-input.num_alpelse if (binding.modifiers.num_alp) {//只能输入数字+字母onlyNumAlp(input)}//v-input.arithelse if (binding.modifiers.arith) {//四则运算符+数字onlyArith(input)}input.dispatchEvent(new Event("input"));}//数字function onlyNum(input) {input.value = input.value.replace(/\D+/g, '');}//整数(0+正整数)function onlyInt(input) {let value = input.value;value = value.replace(/\D+/g, '');input.value = value ? Number(value).toString() : value//去掉开头多个0}//正整数function onlyIntp(input) {if (!/^[1-9][0-9]*$/.test(input.value)) {let value = input.value.replace(/\D+/g, '');if (value && value.substring(0, 1) === '0') {//0开头去除0value = value.substring(1)}input.value = value}}//数字+小数点function onlyNumPoint(input) {input.value = input.value.replace(/[^\d.]/g, "");}//浮点型// eslint-disable-next-line no-unused-varsfunction onlyFloat(input, n) {let value = input.value;value = value.replace(/[^\d.]/g, '');value = value.replace(/^\./g, '');value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');if (n&&Number(n)>0) {//限制n位var d = new Array(Number(n)).fill(`\\d`).join('');// eslint-disable-next-line no-useless-escapevar reg = new RegExp(`^(\\-)*(\\d+)\\.(${d}).*$`, 'ig');value = value.replace(reg, '$1$2.$3')}if (value && !value.includes('.')) {value = Number(value).toString()//去掉开头多个0}input.value = value}//字母function onlyAlp(input) {input.value = input.value.replace(/[^A-Za-z]/g, '');}//数字+字母function onlyNumAlp(input) {input.value = input.value.replace(/[^A-Za-z0-9]/g, '');}//四则运算+-*/()数字function onlyArith(input) {let value = input.valueif (value) {input.value = value.split('').reduce((prev, cur) => {// eslint-disable-next-line no-useless-escapeif (/^[\d|\-|\+|\*|\/|\.|\(|\)]+$/.test(cur)) {return prev + cur}return prev}, '')}}},}
2,注册自定义指令
import input from "./input.js";export default{install:Vue=>{Vue.directive('input',input)}
}
3,全局注册方法
main.js
import inputDirective from './directive/input/install';Vue.use( inputDirective );
4,页面使用
<!-- 只能数字 --><el-input v-input.num v-model="input"></el-input><!-- 只能数字+小数点 --><el-input v-input.num_point v-model="input"></el-input><!-- 只能整数 --><el-input v-input.int v-model="input"></el-input><!-- 浮点型后面限制2位 --><el-input v-input.float="2" v-model="input"></el-input><!-- 只能英文 --><el-input v-input.alp v-model="input"></el-input>
html版本
1,先建一个input.js文件放入以下代码
function input(el, bindings) {const input = el.querySelector('.el-input__inner') || el.querySelector('.el-textarea__inner') || el;input.addEventListener('compositionstart', () => {vnode.locking = true //解决中文输入双向绑定失效})input.addEventListener('compositionend', () => {vnode.locking = false //解决中文输入双向绑定失效input.dispatchEvent(new Event('input'))})//输入监听处理input.onkeyup = () => {// v-input="'num'"if (bindings.value == 'num') { //只能输入数字(开头可以多个0)onlyNum(input);}//v-input="'num_point'"else if (bindings.value == 'num_point') { //只能输入数字+小数点(可以多个小数点)onlyNumPoint(input)}//v-input="'float'"else if (bindings.value == 'float') { //只能输入浮点型(只能一个小数点)可以改变后面的数字改变保留几个小数点onlyFloat(input, 1)}//v-input="'int'"else if (bindings.value == 'int') { //只能输入整数(0+正整数)(开头不能多个0)onlyInt(input)}//v-input="'intp'"else if (bindings.value == 'intp') { //只能输入正整数onlyIntp(input)}//v-input="'alp'"else if (bindings.value == 'alp') { //只能输入字母onlyAlp(input)}//v-input="'num_alp'"else if (bindings.value == 'num_alp') { //只能输入数字+字母onlyNumAlp(input)}//v-input="'arith'"else if (bindings.value == 'arith') { //四则运算符+数字onlyArith(input)}input.dispatchEvent(new Event("input"));}//数字function onlyNum(input) {input.value = input.value.replace(/\D+/g, '');}//整数(0+正整数)function onlyInt(input) {let value = input.value;value = value.replace(/\D+/g, '');input.value = value ? Number(value).toString() : value //去掉开头多个0}//正整数function onlyIntp(input) {if (!/^[1-9][0-9]*$/.test(input.value)) {let value = input.value.replace(/\D+/g, '');if (value && value.substring(0, 1) === '0') { //0开头去除0value = value.substring(1)}input.value = value}}//数字+小数点function onlyNumPoint(input) {input.value = input.value.replace(/[^\d.]/g, "");}//浮点型// eslint-disable-next-line no-unused-varsfunction onlyFloat(input, n) {let value = input.value;value = value.replace(/[^\d.]/g, '');value = value.replace(/^\./g, '');value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');if (n && Number(n) > 0) { //限制n位var d = new Array(Number(n)).fill(`\\d`).join('');// eslint-disable-next-line no-useless-escapevar reg = new RegExp(`^(\\-)*(\\d+)\\.(${d}).*$`, 'ig');value = value.replace(reg, '$1$2.$3')}if (value && !value.includes('.')) {value = Number(value).toString() //去掉开头多个0}input.value = value}//字母function onlyAlp(input) {input.value = input.value.replace(/[^A-Za-z]/g, '');}//数字+字母function onlyNumAlp(input) {input.value = input.value.replace(/[^A-Za-z0-9]/g, '');}//四则运算+-*/()数字function onlyArith(input) {let value = input.valueif (value) {input.value = value.split('').reduce((prev, cur) => {// eslint-disable-next-line no-useless-escapeif (/^[\d|\-|\+|\*|\/|\.|\(|\)]+$/.test(cur)) {return prev + cur}return prev}, '')}}
}
2,去页面引入js文件
<script type="text/javascript" src="./input.js"></script>
3,注册自定义指令
这里directives是和data,methods同级的。
directives: {input},
4,页面使用
后面的num是字符串类型的,区分你要限制什么
<el-input v-model="info" size="small" placeholder="请输入内容" v-input="'num'"></el-input>
相关文章:
【限制输入框值类型】自定义指令el-input输入类型限制,vue和html两个版本
前言 经常遇到输入框需要限制只能输入数字的, 因为用户很离谱,明显输入数字的地方他非要输入英文或者中文 但是用到UI框架或者自己写方法验证表单比较麻烦 为了一个输入框专门去弄一个验证很麻烦 所以这里就整合了两种自定义指令的方式,更加…...
对一个金融风控测额公式的理解(1)
目录 公式:(近3个月回款总额/过去3个月的FBA平均库存价值)*最近FBA的库存价值*过去13周FBA发货比例 详细讨论一下这个:(近3个月回款总额/过去3个月的FBA平均库存价值) 既然(近3个月回款总额/…...
【GEE】2、探索数据集
1简介 在本单元中,我们将讨论以下概念: Google 地球引擎中可用的潜在数据来源。 通过生态示例显示的数据集采样用例。 如何使用 Google 地球引擎访问重要的元数据。 2背景 要将遥感集成到您的研究和分析中,学习如何解析 Google 地球引擎上…...
开发一款直播弹幕游戏需要多少钱?
开发一款直播弹幕游戏需要多少钱?有好多朋友在咨询过弹幕游戏的开发价格后,都会比较吃惊,一款体量这么小的游戏为什么动辄就要几万块甚至十几万? 我来给你们说分析一下原因,这种游戏如果脱离开直播间,可以…...
STM32F103C8T6第一天:认识STM32 标准库与HAL库 GPIO口 推挽输出与开漏输出
1. 课程概述(297.1) 课程要求:C语言熟练,提前学完 C51 2. 开发软件Keil5的安装(298.2) 开发环境的安装 编程语言:C语言需要安装的软件有两个:Keil5 和 STM32CubeMX Keil5 的安装…...
selenium元素定位 —— 提高篇 CSS定位元素
CSS (Cascading Style Sheets) 是一种用于渲染 HTML 或者 XML 文档的语言,CSS 利用其选择器可以将样式属性绑定到文档中的指定元素。理论上说无论一个元素定位有多复杂都能够定位到元素。 因为不同的浏览器 XPath 引擎不同甚至没有自己的 Xpath 引擎,这…...
隔离和非隔离电源的区别
一、电源隔离与非隔离 电源的隔离与非隔离,主要是针对开关电源而言,业内比较通用的看法是: 1、隔离电源:电源的输入回路和输出回路之间没有直接的电气连接,输入和输出之间是绝缘的高阻态,没有电流回路。 …...
C语言自定义数据类型
一、构造数据类型 构造数据类型:用户自己建立的数据类型(自定义数据类型) C语言中的自定义数据类型有:数组类型、结构体类型、共用体类型和枚举类型。 1.1. 结构体 C语言允许用户根据需要自己建立的由不同类型数据组成的组合型…...
SoftwareTest5 - 你就只知道功能测试吗 ?
你就只知道功能测试吗 ? 一 . 按照测试对象划分1.1 文档测试1.2 可靠性测试1.3 容错性测试1.4 安装卸载测试1.5 内存泄漏测试1.6 弱网测试 二 . 按是否查看代码划分2.1 黑盒测试2.2 白盒测试2.3 灰盒测试 三 . 按照开发阶段划分3.1 单元测试3.2 集成测试3.3 冒烟测试3.4 系统测…...
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
在 Uniapp 中,可以通过使用 uni-app 统一的 API 来同时兼容 H5、web、App 和微信小程序,而引入高德地图则有以下两种语法格式供选择: 使用 Vue.js 的语法格式: <template><view><map :longitude"longitude&…...
基于nodejs+vue网上鲜花销售系统
目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…...
stm32 ETH
1 How do I create a project for STM32H7 with Ethernet and LwIP stack working? STM32 LWIP 接收大数据包导致Hardfault问题解决记录 Trying to get Ethernet, LWIP and FreeRTOS working on the STM32H745. Testing on the NUCLEO-H745ZI-Q using FW_1.7 and the STM32Cub…...
【深度学习基础】Pytorch框架CV开发(2)实战篇
📢:如果你也对机器人、人工智能感兴趣,看来我们志同道合✨ 📢:不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢:文章若有幸对你有帮助,可点赞 👍…...
C语言--输出1-100以内同时能被3和5整除的数
首先我们要有1-100的数字. for(int i1;i<100;i) 如何表示同时能被3和5同时整除呢? 如果这个数i,i%30&&i%50,那么这个数就可以同时被3和5整除 if(i%30&&i%50) 最后输出即可 完整代码: #include<stdio.h> void Sh…...
Linux--jdk、tomcat、环境配置,mysql安装、后端项目搭建
前言 上期我们讲到了安装linux虚拟机,这期我们来讲一下如何使用xshell和xftp在linux系统上搭建我们的单体项目 一、软件的传输 1.1 xftp Xftp是一款功能强大的文件传输软件,用于在本地主机和远程服务器之间进行快速、安全的文件传输。它是由南京帆软科…...
NOIP2023模拟10联测31 迷路
题目大意 你在野外迷路了, 你手里只有一张你当前所在的区域的地图。地图将整个区域表示为 n m n\times m nm的网格,你就在其中的某一个格子里。每个格子里要么有树,要么就什么都没有。地图显示了每个格子中是有树还是空的。当然,地图只记载…...
React Query + Redux toolkit 封装异步请求
当你需要进行 Redux 和 React Query 的组合时,除了常规的 Redux 方法(例如手动派发 action 和更新 state),还可以使用 createSlice 和 React Query 进行组合,这可以让你更方便地封装异步请求和更容易地更新状态。 使用…...
CSS基础知识点速览
1 基础认识 1.1 css的介绍 CSS:层叠样式表(Cascading style sheets) CSS作用: 给页面中的html标签设置样式 css写在style标签里,style标签一般在head标签里,位于head标签下。 <style>p{color: red;background-color: green;font-size…...
Windows 时间服务配置和配置工具
文章目录 Windows 时间服务保留Portw32tm 命令配置 Windows 时间服务配置客户端使用两个时间服务器配置客户端自动从域源同步时间检查客户端时间配置使用本地组策略编辑器配置Windows 时间注册表参考推荐阅读 Windows 时间服务 (W32Time) 为 Active Directory 域服务 (AD DS) 管…...
cmake find_package、引用GDAL 初步学习
上次的源码的CMakeLists.txt文件里有 find_package(GDAL REQUIRED) 这句; 从字面意思看此源码需要GDAL库; 查了一下,find_package 指令的基本功能是查找第三方库,并返回其细节; 我当前GDAL安装在D:\GDAL; 先把它的CMakeLists.txt重命名为别的,不使用; 新建一个C…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
第7篇:中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...
go 里面的指针
指针 在 Go 中,指针(pointer)是一个变量的内存地址,就像 C 语言那样: a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10,通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
Python第七周作业
Python第七周作业 文章目录 Python第七周作业 1.使用open以只读模式打开文件data.txt,并逐行打印内容 2.使用pathlib模块获取当前脚本的绝对路径,并创建logs目录(若不存在) 3.递归遍历目录data,输出所有.csv文件的路径…...
【大厂机试题解法笔记】矩阵匹配
题目 从一个 N * M(N ≤ M)的矩阵中选出 N 个数,任意两个数字不能在同一行或同一列,求选出来的 N 个数中第 K 大的数字的最小值是多少。 输入描述 输入矩阵要求:1 ≤ K ≤ N ≤ M ≤ 150 输入格式 N M K N*M矩阵 输…...
day51 python CBAM注意力
目录 一、CBAM 模块简介 二、CBAM 模块的实现 (一)通道注意力模块 (二)空间注意力模块 (三)CBAM 模块的组合 三、CBAM 模块的特性 四、CBAM 模块在 CNN 中的应用 一、CBAM 模块简介 在之前的探索中…...
