Question

我有一个表单字段，用户输入MAC地址的最后6个字符。

我使用JQuery来验证和格式化它。

验证基于允许的字符0-9 A-F和 -

输入每个第二个字符后，将 - 添加到字段中。

这是我的代码：

$("body").on('keyup', '#macAddress', function(){
    if ($(this).val().match(/[^a-fA-F0-9-]/) != null) {
        alert('error in mac address');
        return false;
    }

    if (this.value.indexOf("-") == this.value.length - 1) $(this).val($(this).val().slice(0, -1));
    if ($(this).val().length == 2 || $(this).val().length == 5) $(this).val($(this).val() + "-");
    if ($(this).val().match(/-/g).length > 2) $(this).val($(this).val().replace($(this).val(),''));
});

这似乎有效，但我有几个小问题......

当输入第一个数字时，控制台日志显示＆＃39; Uncaught TypeError：无法读取属性长度为null＆＃39;

这与这一行有关：

        if ($(this).val().match(/-/g).length > 2) $(this).val($(this).val().replace($(this).val(),''));

我不确定为什么会出现这种错误。

您已加入第二个字符a - 。这是预期的，但它会阻止您使用退格键删除任何内容。如果我输入12，那么它已更改为12-按回空格会尝试删除 - ，jquery重新添加，以便您最终无法返回并删除。
我需要限制输入的字符数，最大值应为8个字符，例如：xx-xx-xx其中x = 09 AF

无论如何，我可以通过修改我的代码来完成上述工作吗？

由于

Answer 1

使用keypress事件代替一些文本操作

$("body").on('keypress', '#macAddress', function(e){
    if ($(this).val().match(/[^a-fA-F0-9-]/) != null) {
        alert('error in mac address');
        return false;
    }
    if($(this).val().length > 7) {alert('length exceeded'); return false;}
    var val = $(this).val();
    plainVal = val.split('-').join('');//remove the -
    plainValArray = plainVal.split('');//creare array
    if (e.keyCode != 8) {//add - only if its not backspace 
    $.each(plainValArray,function(i,v){
      if((i+1)%2 == 0)
        plainValArray[i] = plainValArray[i]+'-';//add the - again
    });
    val = plainValArray.join('');
    };
    $(this).val(val);
});

演示：https://jsfiddle.net/n10omm7s/

Jquery - 验证和格式化表单字段

1 个答案: