时间:2021-05-26
可以在main.js中写入方法
Vue.prototype.validSe = function (value, number = 255) {value = value.replace(/[`~*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、]/g, '').replace(/\s/g, "");if (value.length >= number) {this.$message({type: "warning",message: `输入内容不能超过${number}个字符`});}return value;};HTML部分
<el-input maxlength='15' :value="searchForm.logId" @input='e => searchForm.logId = validSe (e,15)' placeholder="请输入日志ID"></el-input>需要将v-model拆分为:value和@input
通过以上方法又扩展出以下方法
//只能输汉字Vue.prototype.chineseOnly = function (value) {value = value.replace(/[^\u4E00-\u9FA5]/g, '');return value};//只能输正整数Vue.prototype.idOnly = function (value) {value = value.replace(/[^0-9]/g, '');return value};//不允许输汉字Vue.prototype.noChineseOnly = function (value) {value = value.replace(/[\u4E00-\u9FA5]/g, '');return value}; //逗号和数字Vue.prototype.programIdOnly = function (value) {value = value.replace(/[^0-9,]/g, '');return value};//数字和回车Vue.prototype.idsOnly = function (value) {value = value.replace(/[^\r\n0-9]/g, '');return value};//数值大小限定Vue.prototype.numberLimit = function (value) {value = value.replace(/[^0-9]/g, '');if (value >= 2147483647) {this.$message({type: "warning",message: `最大可输入值为2147483647`});}return value};// 正整数Vue.prototype.onlyPositiveInteger = function (value) {value = String(value).match(/[1-9]\d*/g, "")return value === null ? '' : Number(value[0])};// 正整数(包含0)Vue.prototype.onlyPositiveInteger1 = function (value) {console.log(typeof (value));value = String(value).match(/[1-9]\d*|0/g, "")return value === null ? '' : Number(value[0])};// 负整数Vue.prototype.onlyNegativeInteger = function (value) {value = String(value).match(/^-[1-9]*\d*/g, "")return value === null ? '' : value[0] === '-' ? '-' : value[0] === '-0' ? '' : Number(value[0])};// 负整数(包含0)Vue.prototype.onlyNegativeInteger1 = function (value) {value = String(value).match(/^-[1-9]*\d*|0/g, "")return value === null ? '' : value[0] === '-' ? '-' : Number(value[0])};// 整数Vue.prototype.onlyInteger = function (value) {value = String(value).match(/^-?[1-9]*\d*|0/g, '')return value === null ? '' : value[0] === '-' ? '-' : value[0] === '' ? '' : Number(value[0])};// 整数区间Vue.prototype.onlySection = function (value, min, max) {if (min < 0) {value = String(value).match(/-?[1-9]*\d*/g, "")} else {value = String(value).match(/[1-9]*\d*/g, "")}// value = String(value).match(/-?[1-9]*\d*/g, "")value = value === null ? '' : value[0] === '-' ? '-' : value[0] === '' ? '' : Number(value[0])if (value < min) {return min} else if (value > max) {return max} else {return value}};总结
以上所述是小编给大家介绍的vue+element项目中过滤输入框特殊字符小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
分页的实现(Vue+Element)+输入框关键字筛选1.这里用的是Element自带的分页组件订单列表序号创建时间订单ID所属用户姓名所属用户ID所属用户手机
项目中经常会用到文本输入框,而且需要限制输入的字数。下面分享一个jQuery实时统计输入框输入字数及限制输入字数的方法,代码如下:HTML:简单的写一下,能实现
我们在项目中经常遇到需要格式化的金额数和银行卡号,一般我们常见的有两种表现形式:输入框内格式化和输入框外格式化。这里我主要把我在项目中遇到的输入框内部格式化的,
本文来源于Element官方文档:http://element-cn.eleme.io/#/zh-CN/component/input基础用法带图标的输入框(属
element-ui默认的table组件支持的表头筛选(过滤)是比较简单的,只支持数组的方式,单选或多选的形式,但有时候我们喜欢支持输入框形式(其实感觉有点扯淡