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();};

相关内容

热门资讯

中考范文关于传统工艺(优质6... 中考范文关于传统工艺 篇一传统工艺传承与创新传统工艺是一个国家文化的重要组成部分,它承载着历史的记忆...
中考作文题目(推荐3篇) 中考作文题目 篇一:我的梦想梦想是每个人内心深处最美丽的幻想,它是我们奋斗的动力和前进的方向。我的梦...
绥化中考满分作文:必须跨过这... 绥化中考满分作文:必须跨过这道坎 篇一近年来,绥化市中考的竞争越来越激烈,许多学生为了能够考上心仪的...
考试反思【精选5篇】 考试反思 篇一近期的一次考试结束后,我开始反思自己的考试经历,并思考如何提高自己的考试成绩。通过深入...
08年常州市中考优秀作文《告... 08年常州市中考优秀作文《告别英雄》 篇一告别英雄我国有许多英雄,他们为国家和人民做出了巨大的贡献。...