vue 验证输入框只能输入整数以及只能输入整数和小数

前言

---

不管什么时候做项目都会遇到验证输入框只能输入整数和小数的需求

STEP 一，输入的必须为正整数，不能输入小数点，这个参考的是element-ui的校验

v-model加.number修饰符，在检验规则里设置type为number

     <el-form :model="form" :rules="rules" ref="form">
        <el-form-item prop="positive_integer">
          <el-input
            clearable
            v-model.number="form.positive_integer"
            maxlength="5"
            placeholder="请输入金额"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button type="primary" @click="update_money('form')">{{
          tip_money_text == 0 ? "充值" : "下一步"
        }}</el-button>
      </div>
export default {
     data() {
           return {
             form: {
                 amount_of_money: "",
                 positive_integer:"",
              },
      rules: {
        amount_of_money: [
          { required: true, message: "请输入金额", trigger: "blur" },
        ],
        positive_integer: [
          { required: true, message: "请输入金额", trigger: "blur" },
          { type: "number", message: "金额必须为整数" },
        ],
      },

             }
          }
}

STEP 二，只能输入整数，小数，但是不能只输入小数点，也不能有两个小数点，只能保留两位小数

这个封装了一个公共得方法，没有用一个正则表达式，因为一开始用了一个正则表达式，但是可以只输入小数点，这样是不满足需求的，所以就封装了一个方法。

这是只用一个正则表达式解决的，适合不是很严格的校验

        <el-input
                v-model="orderQDto"
                @keyup.native="onlyNumber()"
                :placeholder="$t('language.query.min')"
              ></el-input>
  methods: {
    onlyNumber() {
      if (this.orderQDto!= null) {
            this.orderQDto= this.orderQDto.replace(/[^\.\d]/g, "");
      }
    },
}

这是封装的公共得方法，完整的解决了只能输入整数和小数的需求

这个方法是在vue-cli脚手架里边写的，用的是element-ui的框架

公共得index.js

export function onlyNumOnePoint(number_only) {
  //先把非数字的都替换掉，除了数字和小数点
  number_only = number_only.replace(/[^\d.]/g, "");
  //必须保证第一个为数字而不是小数点
  number_only = number_only.replace(/^\./g, "");
  //保证只有出现一个小数点而没有多个小数点
  number_only = number_only.replace(/\.{2,}/g, ".");
  //保证小数点只出现一次，而不能出现两次以上
  number_only = number_only.replace(".","$#$").replace(/\./g, "").replace("$#$", ".");
    //保证只能输入两个小数  
  number_only = number_only.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
  return number_only;
}

在需要引入的页面

     <el-input
            clearable
            @keyup.native="onlyNumber()"
            v-model="amount_of_money"
            placeholder="请输入22金额"
          ></el-input>
    import { onlyNumOnePoint} from "@/utils/index";
     methods: {
       onlyNumOnePoint,
       onlyNumber() {
            this.amount_of_money = this.onlyNumOnePoint(this.amount_of_money);
        },
    }

结束语

当然，你的页面中这样的输入框比较多，可以把这个输入框进行二次封装，直接传参使用就可以了，这样也方便统一管理。好了，有什么需要改进的地方，后续会慢慢更新。