javascript - 如何仅在用户输入内容时验证注册

Question

这就是我正在尝试使用 atm 的方式，但它不起作用，因为当用户没有输入任何内容时，他会收到“您的电话号码包含 10 个号码”警报，尽管它应该直接进入“其他”，不显示任何内容并让他通过。这段代码的目的是仅当用户实际键入电话号码时才验证电话号码，这样我就不会在数据库中得到无意义的号码 - 但我也不会强制用户输入他的号码。不起作用的部分是 if & else 部分。 “if”内的所有内容都可以独立运行，但我不想强制用户输入他们的电话号码，因此我添加了这些 if 和 else。

function CheckPhone() {
        var x = document.getElementById("phone").value;
            if (x == "" || x.length > 0) {
                if (x == "" || x.length == 10) {
                    document.getElementById("errorPhone").innerHTML = "your phone number includes 10 numbers"
                    return false;
                }
                for (var s = 0; s < x.length; s++) {
                    if (!('0' <= x.charAt(s) && x.charAt(s) <= '9')) {
                        document.getElementById("errorPhone").innerHTML =
                            "<span style='color:Red'>your phone number can only contain numbers</span>";
                        return false;
                    }
                }
                document.getElementById("errorPhone").innerHTML = "";
                return true;
            }
            else {
                document.getElementById("errorPhone").innerHTML = "";
                return true;
            }
    }

Answer 1

• 首先检查是否有值。如果没有返回并停止进一步执行。
• 如果有值，请检查它是否是数字。如果没有则返回 false。
• 如果是数字，请检查它是否有 10 位数字。如果没有则返回 false。

function CheckPhone() {
    let x = document.getElementById("phone").value.trim();
    document.getElementById("errorPhone").innerHTML = "";

    // when there is no value entered in the field
    // return true if there is no value in the field
    if ( x == "" ) {
        return true;
    }

    // check if the value is a number
    if ( !isNaN(parseInt(x)) ) {

        // when x is a number
        // check if the number has got 10 digits
        if ( x.length != 10 ) {

            // when number of digits of x is not equal to 10
            document.getElementById("errorPhone").innerHTML = "your phone number includes 10 numbers";
            return false;
        } else {

            // when number of digits of x is equal to 10
            return true;
        }

    } else {

        // when x is not a number
        document.getElementById("errorPhone").innerHTML = "<span style='color:Red'>your phone number can only contain numbers</span>";
        return false;
    }
}