element输入框el-input之格式控制
创始人
2025-05-29 23:38:45

element输入框el-input之格式控制
（1）限制输入的长度：maxlength最大，minlength最小，maxlength=“5”;
（2）页面显示限制字数show-word-limit

（3）出现字数限制提示时，最后几个字会被提示遮挡

// 输入框限制字数
.el-textarea .el-input__count {background: none;
}

在输入的时候控制
（3）只能输入数字：οninput="value = value.replace(/[^\d]/g, ‘’),
扩展：oninput事件是原始input元素的事件，在输入框中输入时就会触发

（4）只能输入数字和小数点οninput=“value = value.replace(/[^\d.]/g, ‘’)”

（5）只能输入数字和小数点，并且用千分号分隔，并且保留小数点后两位，在值变化的时候处理输入内容@change=“changePrice”

changePrice(val) {this.goodsRuleForm.price = this.rbstateFormat(val);},

（6）调用数据格式化方法
参考加千分位，保留俩位小数格式

  // 金额千分位和保留小数点后两位rbstateFormat(cellValue) {if (cellValue !== null) {if (String(cellValue).includes(".")) {cellValue = Number(cellValue).toFixed(2);}cellValue += "";if (!cellValue.includes(".")) cellValue += ".";return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {return $1 + ",";}).replace(/\.$/, "");}},

在校验的时候控制格式
（1）使用prop

（2）在rules加校验规则

 cetificateNo: [{required: true,validator: checkCetificateNo,trigger: ["blur", "change"],},],

（3）checkCetificateNo写在data的return外

let checkCetificateNo = (rule, value, callback) => {const reg = /^[A-Za-z0-9]*$/;const valueLength = value?.toString().length;const testList = [this.IDCard, this.companyID];if (value && testList.includes(this.addRuleForm.certificateType)) {if (valueLength !== 15 && valueLength !== 18) {callback(new Error("请输入15或18位字母或数字"));} else if (valueLength === 15 || valueLength === 18) {if (!reg.test(value)) {callback(new Error("请输入15或18位字母或数字！"));} else {callback();}}} else if (!value) {callback(new Error("请输入证件号码"));}callback();};
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：oracle19c迁移手册

下一篇：素人做课会踩的3大坑，你中了几个？

相关内容

热门资讯

【C语言】结构体（详解） 目录1. 结构体基本知识1.1 结构体声明1.2 结构体的自引用1.3 结构体变量的定义和初始化2....
百万保时捷停斗香上被烧毁,斗香... 今天给各位分享百万保时捷停斗香上被烧毁,斗香烧车还真不稀奇的知识，其中也会对进行解释，如果能碰巧解决...
小提琴价格一般多少钱一把?有什... 本篇文章极速百科给大家谈谈小提琴价格一般多少钱一把?有什么不同吗?，以及小提琴大约多少钱?对应的知识...
驾龄多少年可以上高速?高速几年... 本篇文章极速百科给大家谈谈驾龄多少年可以上高速?高速几年驾龄可以上，以及几年驾龄才能上高速公路对应的...
景逸X3景逸X3最新报价-图片... 本篇文章极速百科给大家谈谈景逸X3景逸X3最新报价-图片-参数，以及景逸x3汽车之家对应的知识点，希...
Pr 复古胶片老电影回忆效果 哈喽，各位小伙伴！今天我们来学习一下如何制作复古胶片老电影回忆效果&#x...
【STM32学习】WWDG窗口... 【STM32学习】WWDG窗口看门狗🐕1、图展示WWDG原理2、复位、中断条件3、溢...
瑞祥是什么意思（瑞祥是什么意思... 今天给各位分享瑞祥是什么意思的知识，其中也会对瑞祥是什么意思?进行解释，如果能碰巧解决你现在面临的问...
黄鼠狼的天敌（黄鼠狼的天敌是什... 今天给各位分享黄鼠狼的天敌的知识，其中也会对黄鼠狼的天敌是什么动物百度百科进行解释，如果能碰巧解决你...
famous怎么读（famou... 今天给各位分享famous怎么读的知识，其中也会对famous怎么读英语进行解释，如果能碰巧解决你现...
中国奉行什么的国防政策（中国奉... 本篇文章极速百科给大家谈谈中国奉行什么的国防政策，以及中国奉行的是什么样的国防政策?对应的知识点，希...
【Hello Linux】进程... 作者：@小萌新 专栏：@Linux 作者简介࿱...
STM32F103指南者开发板... 1 前言 使用STM32F103指南者开发板，安装了Keil5，使用St...
二维数组的表现及应用 1 问题在Java数组中，数组是一种常遇见的表现形式。对于一维数组在最近的学习已经非常...
《程序员面试金典（第6版）》面... 题目描述 给定两个整型数字 N 与 M，以及表示比特位置的 i 与 j（...
什么叫丹霞地貌（中国七大丹霞景... 本篇文章极速百科给大家谈谈什么叫丹霞地貌，以及中国七大丹霞景区对应的知识点，希望对各位有所帮助，不要...
白色骐达mdashmdash好... 今天给各位分享白色骐达mdashmdash好看实用的两箱车的知识，其中也会对白色骐达改装图片进行解释...
裤子尺码28是多大（裤子尺码2... 本篇文章极速百科给大家谈谈裤子尺码28是多大，以及裤子尺码28是多大码对应的知识点，希望对各位有所帮...
进口奔驰s300价格多少（进口... 今天给各位分享进口奔驰s300价格多少的知识，其中也会对进口奔驰s300价格多少钱一辆进行解释，如果...
Keras 的模型（Model... 我们来做个 TensorFlow 的快速入门模型分享。 这次的学习目标就是模型构建的一些相关 API...
串行通信协议（I2C、SPI、... I2C(Inter-Integrated Circuit) 1.简单的双向两线制总线协议标准、半双...
石化团购:放价不打烊,14个汽... 今天给各位分享石化团购:放价不打烊,14个汽车品牌请您挑选!的知识，其中也会对石化团购的商品是真的吗...
tf金箔润唇膏是不是死亡芭比粉... 今天给各位分享tf金箔润唇膏是不是死亡芭比粉的知识，其中也会对tom ford金箔唇膏进行解释，如果...
日本也开始山寨了?造最强悍马,... 本篇文章极速百科给大家谈谈日本也开始山寨了?造最强悍马,比美国的还大一号!，以及日本山寨历史对应的知...
走应急车道一天内最多罚几次?应... 今天给各位分享走应急车道一天内最多罚几次?应急车道抓拍原理的知识，其中也会对应急车道行驶多久会被拍进...
代码分支管理：主干发布分支开发... 大家好，我是rainbowzhou。 上篇文章代码分支管理中，我介绍了3...
蓝桥杯C++组怒刷50道真题（... 🌼深夜伤感网抑云 - 南辰Music/御小兮 - 单曲 - 网易云音乐 ...
2015款林肯MKX空间怎么样... 本篇文章极速百科给大家谈谈2015款林肯MKX空间怎么样林肯MKX购车手册，以及2015款林肯mkx...
夏利n7怎么样能买么?的简单介... 今天给各位分享夏利n7怎么样能买么?的知识，其中也会对进行解释，如果能碰巧解决你现在面临的问题，别忘...
特斯拉宣布已在中国建立数据中心... 本篇文章极速百科给大家谈谈特斯拉宣布已在中国建立数据中心,以实现数据存储本地...，以及特斯拉中国数...