vue+element输入框校验输入汉字再输入数字看似正常，实则有大问题，保存时数据不对

标签：vue 保存 value element 输入框 inputValue replace 输入

在vue+element UI 项目中经常会使用到输入框限制为整数或者小数的需求，一般采用如下oninput="value=value.replace(/[^0-9.]/g,'')"解决，

<el-input        :placeholder="请输入整数或者小数"        v-model="inputValue"       oninput="value=value.replace(/[^0-9.]/g,'')" ></el-input>   你会发现，当你输入汉字时，确实没有显示上去，再输入数字能正常显示，但是，问题来了，你保存的时候却不是你输入的，通常是0，这样不细心检查还查不出来，到时候出问题了还以为是数据出错。 以下解决方案：

该问题是由于 oninput 方法限制了输入框中输入的字符，只允许数字（0-9）和小点号（.）的输入。当输入非法字符（如汉字）时，value.replace(/[^0-9.]/g,'') 会将其替换为空字符串，因此输入框不会显示该字符。

如果您想要在保存数据时获取到输入框中输入的文本内容，可以使用 v-model 来双向绑定数据，并将 oninput="value=value.replace(/[^0-9.]/g,'')" 改为 input 事件监听器：

<template>
  <el-input v-model="inputValue" @input="handleInput"></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput(val) {
      // 过滤非法字符
      this.inputValue = val.replace(/[^0-9.]/g, '')
    },
    saveData() {
      // 在此处使用 this.inputValue 来保存输入框中的数据
    }
  }
}
</script>

在上述代码中，我们使用 @input 添加了一个 input 事件监听器，并在 methods 中定义了处理该事件的方法 handleInput。在该方法中，我们通过正则表达式过滤非法字符，并用赋值运算符来更新 inputValue 的值。在 saveData() 方法中，我们可以直接使用 this.inputValue 来获取输入框中的值，并进行保存。这样就可以实现即使不输入汉字也能保存该字段的值。

希望这个示例对您有所帮助。

标签：vue,保存,value,element,输入框,inputValue,replace,输入
From： https://www.cnblogs.com/zyz-s/p/17381177.html