el-input标签类型为数字，结合表单规则验证

__十七

已于 2022-05-26 17:33:36 修改

阅读量620

点赞数

分类专栏： Vue 文章标签： javascript vue.js 前端

于 2022-05-25 22:03:11 首次发布

本文链接：https://blog.csdn.net/wlijun_0808/article/details/124974850

版权

Vue 专栏收录该内容

59 篇文章 5 订阅

订阅专栏

//data中声明表单规则
 rules: {
  dataAvgMagnitude: [
          { validator: this.validateNumber, trigger: 'blur' }
        ]
 }
 //method中声明validateNumber方法
 validateNumber(rule, value, callback) {
      let numberReg = /^\d+$|^\d+[.]?\d+$/
      if (value !== '') {
        if (!numberReg.test(value)) {
          return callback(new Error('请输入数字'))
        } else {
          return callback()
        }
      } else {
        return callback()
      }
    },
 // html中，注意rules属性
  <el-form-item :hide-required-asterisk="true" label="数据平均量级" prop="dataAvgMagnitude"
          :rules="rules.dataAvgMagnitude" v-if="tabActive === '1'">
          <el-input v-model.number="editData.dataAvgMagnitude" :maxlength="20" show-word-limit></el-input>
</el-form-item>