如何使用javascript創建範圍驗證器？不使用範圍驗證控件在VS

Question

我想定義一個函數來驗證使用Java腳本的範圍。
我有兩個文本框，我輸入最大值和最小值。這是我的一段代碼：

<tr id="TR_Max"> 
    <td><span>max value:</span></td> 
    <td><input id="Text2" type="text" style="width:90%"/></td> 
</tr> 
<tr id="TR_Min"> 
    <td><span>min value:</span></td> 
    <td><input id="Text3" type="text" style="width:90%"/></td> 
</tr> 

我有另一個文本框，用戶輸入他們的願望值。

<input id="user_val" type="text" style="width:90%"/> 

現在我需要一個函數，檢查用戶值是否介於最大值和最小值之間或不是。當然，首先我應該檢查最大值和最小值的類型。我該怎麼做？

Answer 1

我認爲處理這個問題的最好方法是創建一個可以依次評估的正則表達式列表。如果你找到一場比賽，那麼你知道你的類型，如果你沒有找到一個匹配，那麼你可以認爲它只是一個刺痛的類型。

正則表達式列表可以與數據類型在陣列中配對像這樣：

var patterns = [ 
    [ 
     'int', /^[\d]+$/], 
    [ 
     'float', /^[-+]?[0-9]*\.?[0-9]+$/], 
    [ 
     'date', /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.](19|20)\d\d$/] 
]; 

注：日期格式必須是dd/mm/yyyy，但是這可以根據需要

然後假定被改變在HTML有幾個字段（#min和#max），我們可以創建這個函數（注意使用jQuery的）：

function compare() { 
    var min = $("#min").val(); 
    var max = $("#max").val(); 

    if (min === "" || max === "") { 
     alert("data missing - check down the sofa"); 
     return; 
    } 

    var dataType = "string"; 

    for (var i = 0; i < patterns.length; i++) { 
     if (patterns[i][1].test(min) && patterns[i][2].test(max)) { 
      dataType = patterns[i][0]; 
      break; 
     } 
    } 

    alert("Min and Max are of type: " + dataType); 
} 

我t值得注意的是，兩個字段必須具有相同的數據類型，如果不相同則會導致數據類型爲string。

Here is a working example

---

如果你想再擴展，要驗證的範圍內，你可以這樣做是這樣的：

function checkRange(dataType, min, max) { 
    var minValue, maxValue; 

    switch (dataType) { 
     case 'int': 
      { 
       minValue = parseInt(min, 10); 
       maxValue = parseInt(max, 10); 
      } 
      break; 
     case 'float': 
      { 
       minValue = parseFloat(min); 
       maxValue = parseFloat(max); 
      } 
      break; 
     case 'date': 
      { 
       minValue = $.datepicker.parseDate('dd/mm/yy', min); 
       maxValue = $.datepicker.parseDate('dd/mm/yy', max); 
      } 
      break; 
     case 'string': 
      { 
       minValue = min; 
       maxValue = max; 
      } 
      break; 
    } 

    return minValue <= maxValue; 
} 

Here is a working example（注：JQuery的UI是用來解析日期）