输入框正则整理

el-input 各种输入限制的正则整理

先认识正则表达式符号：

1.金额输入最常用的正则限制

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
    input.value = onlyNumOnePoint(val);
}

const onlyNumOnePoint = (number_only) => {
  // 先把非数字的都替换掉，除了数字和小数点
  number_only = number_only.replace(/[^\d.]/g, "");
  // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
  number_only = number_only.replace(/^0+(\d)/, '$1');
  // 必须保证第一个为数字而不是小数点
  number_only = number_only.replace(/^./g, "");
  // 保证只有出现一个小数点而没有多个小数点
  number_only = number_only.replace(/.{2,}/g, ".");
  // 保证小数点只出现一次，而不能出现两次以上
  number_only = number_only.replace(".","$#$").replace(/./g, "").replace("$#$", ".");
  // 保证只能输入两个小数
  number_only = number_only.replace(/^(-)*(\d+).(\d\d).*$/,'$1$2.$3');
  // 千分位逗号分割  
  number_only = number_only.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

  return number_only;
}

2.大小写字母 数字 下划线

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
    input.value = val.replace(/[^\w]/g,'');
}

3.数字 小数点

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
    input.value = val.replace(/[^\d.]/g,'');
}

4.中文

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
    input.value = val.replace(/[^\u4e00-\u9fa5]/g,'');
}

5.排除英文标点

<el-input v-model="input" @input="handleInput" />

const handleInput = (val) => {
    input.value = val.replace(/^[^!@#$%^&*()-=+]/g,'');
}

6.小数点限制

1.如果有多个小数点，移除除第一个之外的所有小数点
2.这里假设字符串以数字开始，且至少有一个小数点，否则可能需要根据实际情况调整和与其他正则组合

<el-input v-model="input" @input="handleInput" /> 
const handleInput = (val) => {     
    input.value = val.replace(/\.(?=.*\.)/g, ''); 
}

//如果字符串以点号开始或结束，移除它  
const handleInput = (val) => {     
    input.value = val.replace(/^\./, '').replace(/\.$/, '');  
}

7.小结

使用正则时，可以按个人需求做细小改动。 后续遇到新的还会继续更新上去