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

目录

写在前面

方案介绍

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

参考资料


写在前面

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

方案介绍

  • 方案一:第一~四属性共同使用
    • 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博客

你可能感兴趣的:(1024程序员节)