el-input 限制输入_el-input 禁止输入-优快云博客

文章讲述了如何在Vue项目中使用ElementUI的el-form组件进行输入字段的规则设置，包括规格重量的必填和数值格式验证，以及危险化学品登记号的字符限制。

页面效果

1. 利用el-form rules

会提示输入问题

2.利用@input

不能继续输入且只能输入数字（不会提示）

实现

效果1

html

          <el-form-item label="规格重量（kg）：" prop="ggzl">
            <el-input  v-model="appendForm.ggzl" type="text" clearable auto-complete="off"
              placeholder="请输入规格重量（kg）">
            </el-input>

          </el-form-item>

js

      rules: {
        ggzl: [{ required: true, message: '请输入规格重量', trigger: 'blur' },{
            validator: function(rule, value, callback) {
              if (/^(0|([1-9][0-9]*))(\.[\d]{1,2})?$/.test(value) == false) {
                callback(new Error("请输入重量，最多保留三位小数"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "change"
          }],
      },

效果2

html

            <el-input v-model="appendForm.djh" type="text" clearable auto-complete="off" placeholder="请输入危险化学品登记号"
              @input="trueDjh">
            </el-input>

js

    // 登记号输入验证
    trueDjh() {
        //限制输入字符数量
      this.appendForm.djh = this.appendForm.djh.slice(0, 15)
        //限制输入内容
      this.appendForm.djh = this.appendForm.djh.replace(/[^0-9]/g, '')
    },