как проверить регистрацию, только если пользователь что-то набирает

Question

вот что я пытаюсь работать с банкоматом, но это не работает в том смысле, что когда пользователь ничего не вводит, он получит предупреждение «Ваш номер телефона включает 10 номеров», хотя это должно go прямиком в «другое», ничего не показывай и дай ему пройти. смысл этого кода состоит в том, чтобы проверять номер телефона только в том случае, если пользователь действительно его набирает, так что я не получу бессмысленных номеров в моей базе данных - но я не заставляю пользователя вводить свой номер. часть, которая не работает, является частью 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;
    }
}

Answer 2

Как я уже говорил в комментариях, ваш подход к этой проблеме вызовет гораздо больше проблем, когда дело касается международных и / или сервисных номеров. Лучшим подходом было бы использовать регулярные выражения. Имейте в виду, однако, что не существует «идеального» подхода к этому.

Следующий код позволяет вам определить минимальную и максимальную длину, если вы все равно хотите это сделать, но это не обязательно (если вы хочу быть осторожным):

function CheckPhone(str, min = 1, max = 100) {
    // If no phone number given, just return valid
    if(str.length < 1){
        return "valid";
    }

    // Reasonably safe regular expression for phone numbers
    var regex = new RegExp(/^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$/, 'g');

    // Check for expected length
    if(str.length < min || str.length > max) {
        return "Your phone number should be between "+min+" and "+max+" characters long.";
    }

    // Check for valid phone number
    if(regex.test(str)) {
        return "valid";
    } else {
        return "Your phone number does not appear to be valid";
    }
}

var result = CheckPhone("+001234567890", 5, 15); // Minimum 5, maximum 15 characters
var example = CheckPhone("+001234567890"); // No minimum or maximum length given

if(result != "valid"){
    document.getElementById("errorPhone").innerHTML = result;
} else {
    // valid number given, handle accordingly
}

Answer 3

С небольшим количеством рефакторинга все стало понятнее.

function SetError(text = "") {
  document.getElementById("errorPhone").innerHTML = text;
}

function IsNumeric(text) {
  return /^\d+$/.test(text)
}

function CheckPhone() {
        var phone = document.getElementById("phone").value;
        
        if(!phone || !phone.length) {
          return false;
        }
        
        if(phone.length === 10) {
          SetError("your phone number includes 10 numbers");
          return false
        }
        
        if(!IsNumeric(phone)) {
          SetError("<span style='color:Red'>your phone number can only contain numbers</span>");
          return false;
        }
        
        return true;
    }
    
console.log(CheckPhone())

#errorPhone {
  color: red;
}

<input type="phone" id="phone" value="1234567890"/>
<div id="errorPhone"></div>

Я думаю, что это хорошая основа, и вы можете добавить к ней некоторые функции