【Web系列二十六】el-input内容约束的一些方案

目录

写在前面

方案介绍

使用正则表达式实现约束函数

参考资料

---

写在前面

        前端开发会涉及很多输入框，通常都需要根据需求限制输入框的输入内容，其中最常用的就是element ui的el-input，本文就以el-input为例说明，但如果有其他类似的需求也可参考本文的实现方案。

方案介绍

<el-input 
    v-model="form.plan" 	
   	type="number" 
   	step="0.5" 
   	min="0"
    max="5" 
   	@keyup="proving($event)"  
   	@keyudown="proving($event)"  
   	@input="editInput($event,'plan')"  
   	oninput="if(value>5)value=5;if(value<0)value=0"
/>

• 方案一：第一~四属性共同使用
  • type=“number” input的原生属性，标明input框的类型
  • step=“0.5” input的原生属性，type=“number” 时生效， 标明输入字段的合法数字间隔（假如 step=“0.5”，则合法数字应该是 -0.5、0、0.5、1，以此类推）
  • min=“0” max=“5” min 属性规定输入字段所允许的最小值。 max 属性规定输入字段所允许的最大值。 min 属性与 max 属性配合使用，可创建合法值范围。
• 方案二：第五/六个属性@keyup/keydown="proving($event)"，可在按键抬起或按下时触发

proving(e){
    var val=e.target.value;
    //限制只能输入一个小数点
    if (val.indexOf(".") != -1) {
        var str = val.substr(val.indexOf(".") + 1);
        if (str.indexOf(".") != -1) {
            val = val.substr(0, val.indexOf(".") + str.indexOf(".") + 1);
        }
    }
    e.target.value = val.replace(/[^\d^\.]+/g,'');
}

• 方案三：第六个属性@input="editInput($event,‘plan’)"，当输入内容是触发，需要基于表单

editInput(value, name) {
    this.form[name] =
        ("" + value) // 第一步：转成字符串
        .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
        .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
        .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
        .match(/^\d*(\.?\d{0,1})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
}

• 方案四：第七个属性οninput="if(value>5)value=5;if(value<0)value=0"，行内表达式，不能用自定义的函数
• 方案五：watch，监视input的输入变量

watch(() => form.plan, () => {
    // 约束函数
})

使用正则表达式实现约束函数

value = value
    .replace(/[^-\d.]/g,"") // 清除'-'、"数字"和"."以外的字符
    .replace(/^\./g,"") // 第一个字符不能是'.'
    .replace(/^(0[0-9])/,"").replace(/^-(0[0-9])/,"") // 第一个字符不能是0
    .replace(/\d{1,}-|\d{1,}\.\d{1,2}-/,"") // 不能在数字后面输入-
    .replace("-.","%$%").replace(/\-\./g,"").replace("%$%","-") // -后不允许.
    .replace(".-","$#$").replace(/\.\-/g,"").replace("$#$",".") // .后不允许-
    .replace(".","$#$").replace(/\./g,"").replace("$#$",".") // 只保留第一个. 
    .replace("-","$%$").replace(/\-/g,"").replace("$%$","-") // 只保留第一个-
    .replace(/^(\d+)\.(\d\d).*$/,'$1.$2') // 最多保留两位小数
    .replace(/^(-)?(\d+)\.(\d\d\d).*$/,'$1$2.$3'); // 最多保留三位小数

参考资料

Element input 正则验证 数字包含正负数 小数点 只包含一个小数点 一个 '-' - Ao_min - 博客园 (cnblogs.com)

el-input 限制 只能输入数字，数字大小，长度，小数点后位数以及字母e的限制_elinput限制数字-CSDN博客