验证MAC地址onkeyup

Validate MAC Address onkeyup

本文关键字：onkeyup 地址 MAC 验证      更新时间：2023-09-26

我正在尝试验证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')功能。

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

您可以使用一个正则表达式来检查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地址。

编辑

片段工作:

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);
}

试试下面的代码:

$('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!
    }
});


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));
    
});
input.badMac {
  background-color : red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="macAddress">

我建议你使用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" />

您可以使用jQuery的toggleClass()与bool值。在本例中，使用regex测试的返回值。

$('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));
});
相关文章：