el-input和input输入框只允许输入数字小数点或某些字符
程序员文章站
2022-06-29 21:52:35
...
在表单验证中常常会有el-input和input输入框只允许输入数字小数点或某些制定字符的需求。实现方式也多种多样,element自带的表单验证和自定义验证器都可以实现,这里使用javascript的oninput
事件,然后配上正则表达式,只需要一行就可以实现需求了。
原理:
oninput 事件在用户输入时触发。该事件在 <input>
或 <textarea>
元素的值发生改变时触发。
与onchange
事件。不同之处在于 oninput
事件在元素值发生变化是立即触发, onchange
在元素失去焦点时触发。 代码如下:
不允许输入其他字符时在正则中加入即可。
<el-dialog
title="参数配置"
:visible.sync="openDoorWallConfig"
width="40%"
:close-on-click-modal="false"
>
<el-form label-position="right" label-width="100px" v-loading="doorLoading"
element-loading-text="加载中..."
element-loading-spinner="el-icon-loading">
<el-form-item
v-for="(item,index) in doorWallParams"
:key="index"
:label="item.key==='door-width'?'xx直径:':'xx厚度:'">
<el-input
maxlength="15"
oninput="value=value.replace(/[^\d^\.]/g,'')"
v-model.trim="item.value"
:placeholder="item.key==='door-width'?'正常范围0.5~1.5 单位:米 最长15位数':'正常范围0.1~1 单位:米 最长15位数'">
{{item.value}}米</el-input>
</el-form-item>
<p class="doorWallTip">提示:墙生成优先采用地图数据内设置的参数,未设置的墙采用当前配置</p>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="openDoorWallConfig = false">取 消</el-button>
<el-button type="primary" @click="subDoorWallParams">确 定</el-button>
</span>
</el-dialog>
上一篇: 怎么加入美团外卖,美团有哪些好吃的
下一篇: 正则表达式