欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

el-input和input输入框只允许输入数字小数点或某些字符

程序员文章站 2022-06-29 21:52:35
...

在表单验证中常常会有el-input和input输入框只允许输入数字小数点或某些制定字符的需求。实现方式也多种多样,element自带的表单验证和自定义验证器都可以实现,这里使用javascript的oninput事件,然后配上正则表达式,只需要一行就可以实现需求了。

原理:

oninput 事件在用户输入时触发。该事件在 <input><textarea> 元素的值发生改变时触发。
onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。 代码如下:

el-input和input输入框只允许输入数字小数点或某些字符
不允许输入其他字符时在正则中加入即可。

<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>