如何使用 JavaScript 驗證圖像尺寸（表示為“5X4”）？

Question

我必須使用 JavaScript 進行圖像大小驗證。 尺寸以文本形式提供，格式為nXn — 例如“5X4”或其他形式。

我已經測試了提供的尺寸是否包含“X”：

if(inputVal.indexOf("X")==-1) 
{
$('#erSize').append("*Size should be (e.g) 6X4");
}

但是這個測試也接受例如“aXg”。

如何檢查“X”兩側輸入的值是否僅為整數？

Answer 1

使用正則表達式

var pattern = /[0-9]\X[0-9]/;
inp = "AXG"; //Sample
if(!pattern.test(inp))
 alert("Error");

http://jsfiddle.net/hFTJb/

Answer 2

您可以使用 RegEx 輕松做到這一點。

使用正則表達式為/(\d+)X(\d+)/g

function isValidInput() {
  var regex = new RegExp(/(\d+)X(\d+)/g);
  var match = regex.exec(inputVal);
  if (match == null) {
    $('#erSize').append("*Size should be (e.g) 6X4");
  } else {
    // here 'match' will be an array of 2 numeric values [D,D] where d is an integer.
  }
}

Answer 3

if(/^\d+X\d+$/.test(inputVal)) // add i after the pattern to match x case-insensitive
{
    $('#erSize').append("*Size should be (e.g) 6X4");
}

// accepts "1X1"
// accepts "9999X9999"
// rejects "aaa1X1aaa"

Answer 4

RegEx 可能是最好的方法，我將給出沒有正則表達式的“原始”示例，它正在做同樣的事情：

function ValidateImageSize(imgSize) {
    var arrDimensions = imgSize.toUpperCase().split("X");
    if (arrDimensions.length != 2)
        return false;
    var w = arrDimensions[0] * 1;
    var h = arrDimensions[1] * 1;
    return !isNaN(w) && !isNaN(h) && w > 0 && h > 0;
}

用法：

if (!ValidateImageSize(inputVal)) {
    $('#erSize').append("*Size should be (e.g) 6X4");
}

提供它是因為它比 RegEx 更具可讀性，並且您可以控制和理解每個步驟。
現場測試用例。