0


Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位

要实现只能输入数字且小数点后只能是1-2位的功能,可以使用Element UI的el-input组件,并结合正则表达式和自定义校验函数来限制输入。

  1. 在模板中使用el-input组件,并设置其type属性为"number",以确保只能输入数字。
 <template>
   <el-input v-model="inputValue" type="number"></el-input>
 </template>
  1. 在data中定义一个inputValue的变量,用于双向数据绑定输入框的值。
 <script>
 export default {
   data() {
     return {
       inputValue: ''
     }
   }
 }
 </script>
  1. 在el-input组件上添加一个自定义的校验函数,用于限制小数点后的位数。在该函数中,使用正则表达式来匹配输入的值是否合法。
 <template>
   <el-input v-model="inputValue" type="number" :validate="validateInput"></el-input>
 </template>
 <script>
 export default {
   data() {
     return {
       inputValue: ''
     }
   },
   methods: {
     validateInput(rule, value, callback) {
       const reg = /^\d+(\.\d{1,2})?$/
       if (!reg.test(value)) {
         callback(new Error('请输入正确的数字(最多两位小数)'))
       } else {
         callback()
       }
     }
   }
 }
 </script>

通过以上步骤,就可以实现只能输入数字并且小数点后只能是1-2位的限制。当输入不合法时,会显示错误提示信息。

标签: ui vue.js elementui

本文转载自: https://blog.csdn.net/m0_72196169/article/details/135282173
版权归原作者 跟Bug双向奔赴 所有, 如有侵权,请联系我们删除。

“Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位”的评论:

还没有评论