在vue项目中如何限制input的输入内容？

angrybird2332022-08-10FrontendVue

在vue项目中，我们通常使用v-model来绑定input的值，但是，在某些情况下，我们需要限制用户输入的内容，比如：只允许输入数字、整数、两位小数，或者只允许输入字母，或者只允许输入中文等等。
我们可以使用@input="inputEvent"事件来监听用户输入的内容，然后在事件处理函数中，对输入的内容进行判断，如果满足要求，则将输入的内容赋值给input的value，否则，将原来的值赋值给input的value。下面是一些常用的格式化函数：

限制只能输入中文

function formatChinese(value) {
    const reg = /[^一-龥]/g; // 匹配非中文字符
    return value.replace(reg, '');
}

限制只能输入数字(整数或小数)

/**
 * 限制只能输入数字(整数或小数)
 * @param {String} value 输入的值
 * @param {Number} digitCount 小数位数，默认为2
 * @returns {String} 格式化后的值
 */
function formatNumber(value, digitCount=0) {
  if(digitCount<=0 && value){
    return parseInt(value);
  }
  const reg = new RegExp(`^(\\d+\\.?\\d{0,${digitCount}}).*$`);
  value = String(value).replace(/[^\d.]/g, "");
  value = value.replace(reg, "$1");
  return value;
}

限制只能输入整数

function formatInteger(value) {
  const reg = /[^0-9]/g; // 匹配非数字字符
  value = value.replace(reg, '');
  return value
}

只能输入：数字、英文、符号

export const formatNumEnMark = value => {
  const reg = /[\u2E80-\uFE4F]/g;
  return value.replace(reg, "");
};

限制身份证输入 [0-9xX]

export const formatIdCardNumber = value => {
  value = value.replace(/[^0-9xX]/, "");
  return value;
};