Question

我正在尝试验证MAC地址的表单字段。

我有这个有效。

$('body').on('keyup', '#macAddess', function(e){
    var e = $(this).val();
    var r = /([a-f0-9]{2})([a-f0-9]{2})/i,
    str = e.replace(/[^a-f0-9]/ig, "");
    while (r.test(str)) {
        str = str.replace(r, '$1' + ':' + '$2');
    }
    e = str.slice(0, 17);
    $(this).val(e)
});

当用户键入格式化MAC地址时，在每对字符后添加:。它只允许a-f和0-9，因此不会添加无效字符。

我想稍微扩展它。当用户输入MAC地址时，我想要一个类添加到输入显示它是错误的，直到输入完全形成的MAC地址。

例如：

if (MAC is invalid) $('#' + id).addClass('badMac')

因此，如果用户输入了一个值，则会添加该类，并且只有在输入完全形成且有效的mac时才会删除该类。

我想在on('keyup')函数中保留所有内容。

如何测试它是否无效然后设置类？

Answer 1

您可以使用检查MAC地址是否有效的正则表达式对其进行测试：

var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]?)+$/i;
var mac_address = $(this).val();
if(regexp.test(mac_address)) {
    //valid!
} else {
    //invalid!
}

请注意，如果您在keyup事件上写这个，那么在用户写入整个有效的MAC地址之前，您将获得无效的语句。

修改

代码段工作：

＆＃13;

var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]?)+$/i;
var mac_address = "fa:09:91:d5:e4:5a";
if(regexp.test(mac_address)) {
    console.log("Valid: "+ mac_address);
} else {
    console.log("Invalid: "+ mac_address);
}

＆＃13;

所以试试这段代码：

$('body').on('keyup', '#macAddess', function(e){
    var e = $(this).val();
    var r = /([a-f0-9]{2})([a-f0-9]{2})/i,
    str = e.replace(/[^a-f0-9]/ig, "");
    while (r.test(str)) {
        str = str.replace(r, '$1' + ':' + '$2');
    }
    e = str.slice(0, 17);
    $(this).val(e);

    var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]?)+$/i;
    var mac_address = $(this).val();
    if(regexp.test(mac_address)) {
        //valid!
    } else {
        //invalid!
    }

});

Answer 2

＆＃13;

function isValidMac(mystring){
  var regex = /^([0-9A-F]{2}[:-]){5}([0-9A-F]{2})$/;
  return regex.test(mystring);
  }
  
 $('body').on('keyup', '#macAddress', function(e){
    var e = $(this).val();
    var r = /([a-f0-9]{2})([a-f0-9]{2})/i,
    str = e.replace(/[^a-f0-9]/ig, "");
    while (r.test(str)) {
        str = str.replace(r, '$1' + ':' + '$2');
    }
    e = str.slice(0, 17);
    $(this).val(e)

    $("#macAddress").toggleClass("badMac",!isValidMac(e));
    
});

＆＃13;

input.badMac {

  background-color : red; 

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="macAddress">

＆＃13;

Answer 3

您可以将jQuery的toggleClass（）与bool值一起使用。在这种情况下，使用正则表达式测试的返回值。

$('body').on('keyup', '#macAddess', function(e){
    var input = $(this).val();
    var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]?)+$/i;

    $("#your-input-id").toggleClass("valid", regexp.test(input));
});

Answer 4

我建议您使用input事件，该事件还将处理用户使用Ctrl+C，Ctrl+V输入MAC地址时的用例，以及代码应该看到的验证像这样：

$(function() {
    var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}?)+$/i;

    $("#macAddess").on("input", function(e) {
  	var tb = $(this);
        var val = tb.val().replace(/[^a-f0-9]/ig, "");
        var r = /([a-f0-9]{2})([a-f0-9]{2})/i;
        while (r.test(val)) {
            val = val.replace(r, '$1' + ':' + '$2');
        }
        val = val.slice(0, 17);
        tb.val(val);    
        tb.toggleClass("badMac", !regexp.test(tb.val()));
    });
});

.badMac {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="macAddess" />

验证MAC地址onkeyup

4 个答案:

修改