el-input 限制输入

最新推荐文章于 2024-08-05 17:07:25 发布

iiiiis泡面

最新推荐文章于 2024-08-05 17:07:25 发布

阅读量662

点赞数 9

文章标签：前端 vue.js 正则表达式 javascript elementui

本文链接：https://blog.csdn.net/dd_lcdw/article/details/135477224

版权

页面效果

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, '')
    },