用于数字排序的 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

我会将数字放入一个数组中，然后循环检查它们的值和下一个索引的值。如果你一直坚持下去，你就有了一套很好的组合。否则，你这是一个糟糕的集合。

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

Answer 2

Javascript（如果您愿意，可以将 console.log() 替换为 alert()）

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>