驗證MAC地址onkeyup

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地址，並在每對字符后添加: 。 它將只允許af和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地址為止。

編輯

片段工作方式：

 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!
    }

});

Answer 2

 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"> 

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" />