【vue】用maxmin对输入框的字符做大小限制

vue表单rules校验_vue rules 表单验证_一级新生的博客-CSDN博客

（表单内容形式讲得很详细，梳理清晰）

https://www.cnblogs.com/voxov/p/12121196.html

（表单参数讲得很详细）

一般是表单实现的，对于在表单上参数的设置，可以参照以上，最后长这样。

别忘了在表单里绑定rules

<el-form :model="backflowSetting" :rules="rules" label-width="160px" size="mini" style="width:600px">

<el-row>
                <el-form-item prop="rule里绑定的">
                  <el-col :span="17"><el-checkbox label="输入框的题目"  v-on:change="checked=!checked"/></el-col>
                  <el-col :span="7"><el-input type="number" v-model.number="表单名字.rule里绑定的" step="0.1" placeholder="0~100.0" :disabled=checked >
                    <template v-slot:append>
                      <span>%</span>
                    </template>
                  </el-input>
                    </el-col>
                </el-form-item>
              </el-row>

表单验证数字大小设置

Vue使用elementUI中的表单验证数字大小设置_elementui表单验证数字_日拱一卒无有尽的博客-CSDN博客

v-model后添加.number表示输入的数字为数字类型，如果不添加的话为string类型。

在elementUI的rule中添加type：number，表示要验证的数据为数字类型；而min,max则表示要验证的最大值和最小值。

如果不记得rule的形式，大概是这样。

data() {
  return {​​​​​​​ 
       rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
         }
    }
}

如果想将输入的字符串，即便是小数也转成数字的话，其实.number可以实现的。

在Vue中，.number修饰符可以处理小数的输入。当你将该修饰符应用到v-model绑定的输入框上时，它会自动将输入的值转换为数字类型，并且支持接受小数作为输入。

以下是一个示例，演示如何在Vue中使用.number修饰符处理小数输入：

<template>
  <div>
    <input type="number" step="0.01" v-model.number="inputValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: null,
    };
  },
};
</script>

在上面的示例中，我们创建了一个<input type="number">的输入框，并在该输入框上使用.number修饰符。这意味着inputValue属性将始终保持为数字类型。

注意，在处理小数输入时，我们还设置了step属性为 "0.01"，以指定输入框的步长为0.01，以便用户可以方便地输入小数部分。

使用.number修饰符的输入框将自动过滤非数字字符，并将输入值转换为合法的小数。例如，如果用户输入了 “1a2.5b”，Vue将自动将其转换为数字 12.5。

总结来说，.number修饰符可以处理小数的输入，并且提供了方便的自动转换功能。你可以根据实际需求，根据需要设置输入框的属性，例如step来指定小数部分的精度。

不过这个可以输入很多位，比方2.3333，没有对小数点后位数做限制。