對數字排序的javascript驗證

Question

以下代碼用於檢查numbers.num1，num2和num3的驗證。驗證工作如num1小於num2小於num3。此訂單隨後會生效，但在顯示提示消息後，輸入的號碼和打破訂單的號碼需要重置爲空。

<form name="validateForm" method="POST">Enter num1 
    <input type="text" id="num1" name="num1" value="" onchange="javascript:validate()" /> 
    <br/>Enter num2 
    <input type="text" id="num2" name="num2" value="" onchange="javascript:validate()" /> 
    <br/>Enter num3 
    <input type="text" id="num3" name="num3" value="" onchange="javascript:validate()" /> 
    <br/> 
</form> 

代碼：

function validate() { 
    var num1 = document.validateForm.num1.value; 
    var num2 = document.validateForm.num2.value; 
    var num3 = document.validateForm.num3.value; 
    var count = 0; 
    if (num1 != "") { 
     count++ 
    } 
    if (num2 != "") { 
     count++ 
    } 
    if (num3 != "") { 
     count++ 
    } 
    var numarray = new Array(count); 
    var flag = "false"; 
    var j = 0; 
    if (!isNaN(num1)) { 
     numarray[j] = num1; 
    } else { 
     flag = "true"; 
    } 


    if (!isNaN(num2)) { 
     if (flag == "true") { 
      alert("numbers are not in order"); 
      document.validateForm.num2.value = ""; 
      return false; 
     } 
     numarray[j] = num2; 
     j++; 
    } else { 
     flag = "true"; 
    } 
    if (!isNaN(num3)) { 
     if (flag == "true") { 
      alert("numbers are not in order"); 
      document.validateForm.num3.value = ""; 
      return false; 
     } 
     numarray[j] = num3; 
     j++; 
    } 
    if (numarray.length > 1) { 
     for (var x = 0; x < numarray.length - 1; x++) { 
      if (numarray[x + 1] < numarray[x]) { 
       alert("numbers are not in order"); 
       return false; 
      } 
     } 
    } 
} 

Answer 1

的Javascript（可更換的console.log（）的警報（）如果你喜歡）

function validate() { 

    // get the input fields for the numbers 
    var numbers = document.getElementsByName("number"); 

    /* Alternative 
    var numbers = document.myform.number; */ 

    // parse the numbers as integer 
    var num1 = parseInt(numbers[0].value); 
    var num2 = parseInt(numbers[1].value); 
    var num3 = parseInt(numbers[2].value); 

    console.log('initial values:', num1, num2, num3); 

    // check that all fields are filled 
    if (!num1 || !num2 || !num3) { 
     console.log('some fields are empty or not numbers'); 
     return false; 
    } 

    // if the order is correct, success 
    if (num1<num2 && num2<num3) { 
     console.log('success: numbers are in correct order'); 
    } else { 
     // otherwise, check which number is wrong and reset the field 

     if (!(num1<num2)) { 
      console.log('error: num1 is wrong'); 
      numbers[0].value = ""; 
     } else if (!(num2<num3)) { 
      console.log('error: num3 is wrong'); 
      numbers[2].value = ""; 
     } 
    } 

    /* Alternative #1 
    // check if a number is wrong and reset the field 
    if (!(num1<num2)) { 
     console.log('error: num1 is wrong'); 
     numbers[0].value = ""; 
     return false; 
    } else if (!(num2<num3)) { 
     console.log('error: num3 is wrong'); 
     numbers[2].value = ""; 
     return false; 
    } else { 
     console.log('success: numbers are in correct order'); 
     return true; 
    } */ 

    /* Alternative #2 
    var nums = [num1, num2, num3]; 
    for (var i = 1; i < nums.length; i++) { 
     if (!(nums[i-1]<nums[i])) { 
      numbers[i].value = ""; 
      return false; 
     } 
    } 
    console.log('success: numbers are in correct order'); 
    return true; 
    */ 
} 

的Html

<form name="myform"> 
    Enter num1: <input type="text" name="number" onchange="validate()" /><br /> 
    Enter num2: <input type="text" name="number" onchange="validate()" /><br /> 
    Enter num3: <input type="text" name="number" onchange="validate()" /><br /> 
</form> 

Answer 2

我會將數字放入一個數組中，然後通過檢查下一個索引的值來循環。如果你能完成這一切，那麼你有一個好的組合。否則，你這是一個糟糕的集合。

var numbers = [2, 3, 4], 
    inOrder = checkValues(numbers); 

function checkValues (arr) { 
    // Cycle over every item in the array, exclude last item 
    for (var i = 0; i < (arr.length - 1); i++) { 
     // If current item is greater than item at next index 
     if (arr[ i ] > arr[ i + 1 ]) { 
      // List is not in order 
      return false; 
     } 
    } 
    // If you made it to this point, the list is in order 
    return true; 
} 

至於事後復位，你可以調用窗體本身上.reset()方法：

var myForm = document.forms["validateForm"]; 

/* ... */ 

if (checkValues(numbers)) { 
    myForm.reset(); 
}