// 只能输入汉字、英文、数字
btKeyDown(e) {
e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,"");
//限制输入特殊字符
btKeyUp(e) {
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g,"");
在el-input 内 使用 keyup等事件 需要添加 .native 否则无法正常执行事件
下面是 只可输入数字
<el-input
size="small"
v-model="scope.row.order_number"
v-show="scope.row.isShowInp_order"
@blur="editOrder(scope.$index,scope.row)"
v-focus
@keyup.native="UpNumber"
@keydown.native="UpNumber"
class="table_input"
></el-input>
// 只可输入数字
UpNumber(e) {
e.target.value = e.target.value.replace(/[^\d]/g,"");
限制输入正数 保留两位小数
<el-input
v-model="modalForm.invoice_pre_amount"
placeholder="请输入"
oninput="value=value.replace(/[^\d.]/g,'').replace(/^\./g, '').replace(/\.{2,}/g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').match(/^\d*(\.?\d{0,2})/g)[0] || null"
></el-input>
正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。
本文就是为了纪录在项目中用到的正则表达式,方便后期使用查阅。
正则表达式:校验只能输入0-100(包括两位小数及0和100)
代码如下:
// 只能输入0-100(包括两位小数及0和100)
const validateNumber = (str) => {
return new RegExp('(^(\\
<el-form ref="ruleForm" :model="form" :rules="rules">
<el-form-item label="上级地区:" prop="region" :label-width="formLabelWidth">
<el-cascader
v-model="selectedOptions"
:options="option
style="width:35px"
v-model="scope.row.fileOrder"
@input="scope.row.fileOrder = Number($event.target.value.replace(/\D+/, ''))"
第二部封装个自定义指令放在标签上!
directives: {
numberOnly
<el-input :value="record.maxQueryCount" size="300" :maxlength='8' onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
但是页...
dist/
├── vue-number-input.js (UMD, default)
├── vue-number-input.min.js (UMD, compressed)
├── vue-number-input.esm.js (ECMAScript Module)
└── vue-number-input.esm.min.js (ECMAScript Module, compressed)
npm install vue @chenfengyuan/vue-number-input
在浏览器中:
< script src =" /path/to/vue.js " > </ script > <!-- Vue.js is required -->
< script src ="
placeholder="序号"
type="number"
onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )">
</el-input>
这里的 οnkeypress="return( /[\d]/.test(String.fromCharCode(.
在Vue3中,可以使用el-input组件来实现只能输入数字或符号的功能。根据提供的引用内容,有三种不同的限制方式可以实现这个功能。
第一种方式是只能输入纯数字,可以使用正则表达式过滤非数字字符。例如,可以在el-input组件的@input事件中使用正则表达式将非数字字符替换为空字符串。具体代码如下:
```html
<el-input v-model="aaa" type="text" @input="(v) => (aaa = v.replace(/[^\d]/g, ''))"></el-input>
这样,输入框中只能输入纯数字。
第二种方式是只能输入数字和小数点,最多保留4位小数。同样可以使用正则表达式来实现。在el-input组件的@input事件中,可以使用正则表达式将非数字和非小数点字符替换为空字符串,并限制小数点后最多保留4位小数。具体代码如下:
```html
<el-input v-model="aaa" type="text" @input="(v) => (aaa = v.replace(/[^\d.]/g, '').replace(/^0(\d)/, '$1').replace(/^\./, '0.').match(/^\d*(\.?\d{0,4})/g)[0] || '')"></el-input>
这样,输入框中只能输入数字和小数点,并且最多保留4位小数。
第三种方式是能输入纯数字和小数,例如6.66。同样可以使用正则表达式来实现。在el-input组件的@input事件中,可以使用正则表达式将非数字和非小数点字符替换为空字符串。具体代码如下:
```html
<el-input v-model="aaa" type="text" @input="(v) => (aaa = v.replace(/[^\d.]/g, ''))"></el-input>
这样,输入框中可以输入纯数字和小数。
请根据你的需求选择其中一种方式来实现只能输入数字或符号的功能。