element ui input框限制

琉璃℡初雪

已于 2024-05-23 14:28:12 修改

阅读量463

点赞数

文章标签： ui vue.js javascript

于 2023-08-08 10:54:57 首次发布

本文链接：https://blog.youkuaiyun.com/snow_living/article/details/132162258

版权

element ui input框只能输入数字

 <el-form-item label="经度" prop="x">
                  <el-input v-model="ruleForm.x" placeholder="输入经度" @keyup.native="ruleForm.x = oninput(ruleForm.x)" />
                </el-form-item>

oninput(num) {
  debugger
  var str = num
  var len1 = str.substr(0, 1)
  var len2 = str.substr(1, 1)
  //如果第一位是0，第二位不是点，就用数字把点替换掉
  if (str.length > 1 && len1 == 0 && len2 != ".") {
    str = str.substr(1, 1)
  }
  //第一位不能是.
  if (len1 == ".") {
    str = ""
  }
  //限制只能输入一个小数点
  if (str.indexOf(".") != -1) {
    var str_ = str.substr(str.indexOf(".") + 1)
    if (str_.indexOf(".") != -1) {
      str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
    }
  }
  //正则替换
  str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点 
  return str
},

vue2 正则效验只允许输入数字带2位小数及百分数

这个正则表达式匹配以下情况：

一个或多个数字，后面可以跟着一个点号和一到两个小数位（例如 123、123.4、123.45）
或者，同样格式的数字后面跟着一个百分号（例如 123%、123.4%、123.45%）

接下来，你可以在你的Vue组件中使用这个正则表达式进行验证。以下是一个简单的Vue组件示例：

<template>
  <div>
    <input
      type="text"
      v-model="inputValue"
      @input="validateInput"
      placeholder="请输入数字（可带两位小数）或百分数"
    />
    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      errorMessage: '',
    };
  },
  methods: {
    validateInput() {
      const isValid = numberWithDecimalAndPercentRegex.test(this.inputValue);
      if (!isValid) {
        this.errorMessage = '请输入有效的数字（可带两位小数）或百分数';
      } else {
        this.errorMessage = '';
      }
    },
  },
  created() {
    // 正则表达式定义
    const numberWithDecimalAndPercentRegex = /^(?:(?:\d+(?:\.\d{1,2})?)|(?:\d+(?:\.\d{1,2})?%))$/;
    // 可以在这里做其他初始化操作
  },
};
</script>

<style scoped>
.error-message {
  color: red;
}
</style>