输入框验证只能输入大于等于0的数字及小数点后位数长度的限制（正则表达式）

根据业务需要，项目里大部分输入框的验证是支持输入数字及验证数字长度，所以我直接将这两个验证方法挂载在原型上，通过传参的方式验证不同的字段
1、在components文件夹下创建一个RegExp.js的文件，这里我写了3个方法，只看前两个就行
第一个是验证输入框只能输入的输入，支持0,0.0,0.00,0.000等数值为0 的输入
第二个只验证小数点后位数的验证，可通过传参的方式自定义验证小数点后位数的长度

export default {
  install(Vue) {
    // 数字验证--且大于等于0
    Vue.prototype.RegNumber = (name) => {
      return {
        pattern:/^([1-9]\d*|0)(\.\d+)?$/,
        message: "请输入正确的" + name,
        trigger: "blur"
      }
    },
    // 数字+长度验证
    Vue.prototype.RegNumberLength = (length) => {
      const reg = new RegExp("^\\d+(\\.\\d{1," + length + "})?$")
      return {
        pattern: reg,
        message: "小数点后最长可输入" + length + "位数字",
        trigger: "blur"
      }
    },
    // 任意数字验证
    Vue.prototype.RegAllNumber = (name) => {
      return {
        pattern: /^-?([1-9]\d*|0)(\.\d+)?$/,
        message: "请输入正确的" + name,
        trigger: "blur"
      }
    },
    // 数据过长--进行转换
    Vue.prototype.TransformNumber = (data) => {
      let TransformedNum
      let unit = ""; const k = 10000; const size = ["", "万", "亿", "万亿"]
      let i
      if (data < k) {
        TransformedNum = data.toFixed(2)
      } else {
        i = Math.floor(Math.log(data) / Math.log(k))
        TransformedNum = ((data / Math.pow(k, i))).toFixed(2)
        unit = size[i]
      }
      const TransformedObj = { data: TransformedNum, unit: unit }
      return TransformedObj
    }
  }
}

2、在mian.js中注册

// 正则表达式
import RegExp from './components/RegExp'

Vue.use(RegExp)

3、注册完后就能正常使用了

<el-form-item label="乡村人口" prop="population.rural" :rules="[{ required: true, message: '乡村人口不能为空', trigger: 'blur' },RegNumber('乡村人口'),RegNumberLength(5)]">
  <el-input v-model="form.population.rural" style="width: 280px" >
    <i slot="suffix" style="font-style: normal">万人</i>
   </el-input>
</el-form-item>

image.png

image.png

若输入框还需要验证不能输入0,0.0,0.00,0.000,0.0000等类型的数值输入：

在验证规则中加入如下代码：

{pattern:/^[1-9]|([1-9]+(\.[1-9]+)?)$/,message: '城镇人口不能为零', trigger: 'blur'}

<el-form-item label="城镇人口" prop="population.urban" :rules="[{ required: true, message: '城镇人口不能为空', trigger: 'blur' },{pattern:/^[1-9]|([1-9]+(\.[1-9]+)?)$/,message: '城镇人口不能为零', trigger: 'blur'},RegNumber('城镇人口'),RegNumberLength(5)]">
  <el-input v-model="form.population.urban" style="width: 280px" >
    <i slot="suffix" style="font-style: normal">万人</i>
   </el-input>
  </el-form-item>

image.png

image.png

image.png