element输入框el-input之格式控制

element输入框el-input之格式控制
（1）限制输入的长度：maxlength最大，minlength最小，maxlength=“5”;
（2）页面显示限制字数show-word-limit

<el-input
  type="textarea"
  placeholder="请输入内容"
  v-model="textarea"
  maxlength="30"
  show-word-limit
>
</el-input>

（3）出现字数限制提示时，最后几个字会被提示遮挡

// 输入框限制字数
.el-textarea .el-input__count {
  background: none;
}

在输入的时候控制
（3）只能输入数字：οninput="value = value.replace(/[^\d]/g, ‘’),
扩展：oninput事件是原始input元素的事件，在输入框中输入时就会触发

<el-input placeholder="请输入" maxlength="5" v-model="splitCrWritSn" oninput="value = value.replace(/[^\d]/g, '')">
  </el-input>

（4）只能输入数字和小数点οninput=“value = value.replace(/[^\d.]/g, ‘’)”

  <el-input
                v-model="goodsRuleForm.price"
                placeholder="请输入单价（元）"
                oninput="value = value.replace(/[^\d.]/g, '')"
                :disabled="checkStatus"
                @change="changePrice"
              ></el-input>

（5）只能输入数字和小数点，并且用千分号分隔，并且保留小数点后两位，在值变化的时候处理输入内容@change=“changePrice”

changePrice(val) {
      this.goodsRuleForm.price = this.rbstateFormat(val);
    },

（6）调用数据格式化方法
参考加千分位，保留俩位小数格式

  // 金额千分位和保留小数点后两位
    rbstateFormat(cellValue) {
      if (cellValue !== null) {
        if (String(cellValue).includes(".")) {
          cellValue = Number(cellValue).toFixed(2);
        }
        cellValue += "";
        if (!cellValue.includes(".")) cellValue += ".";
        return cellValue
          .replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
            return $1 + ",";
          })
          .replace(/\.$/, "");
      }
    },

在校验的时候控制格式
（1）使用prop

  <el-form-item label="证件号码" prop="cetificateNo">
                <el-input
                  v-model="addRuleForm.cetificateNo"
                  placeholder="请输证件号码"
                  :disabled="checkStatus"
                  key="cetificateNo1"
                ></el-input>
              </el-form-item>

（2）在rules加校验规则

 cetificateNo: [
          {
            required: true,
            validator: checkCetificateNo,
            trigger: ["blur", "change"],
          },
        ],

（3）checkCetificateNo写在data的return外

let checkCetificateNo = (rule, value, callback) => {
      const reg = /^[A-Za-z0-9]*$/;
      const valueLength = value?.toString().length;
      const testList = [this.IDCard, this.companyID];
      if (value && testList.includes(this.addRuleForm.certificateType)) {
        if (valueLength !== 15 && valueLength !== 18) {
          callback(new Error("请输入15或18位字母或数字"));
        } else if (valueLength === 15 || valueLength === 18) {
          if (!reg.test(value)) {
            callback(new Error("请输入15或18位字母或数字！"));
          } else {
            callback();
          }
        }
      } else if (!value) {
        callback(new Error("请输入证件号码"));
      }
      callback();
    };