簡體   English   中英

如何檢查所有輸入是否有價值並做某事

[英]How to check all input has value and do something

我有這些輸入,我想檢查它們中的每一個是否有價值然后做點什么;

const tch_family_name = document.getElementById('tch_family_name');
const tch_lastname = document.getElementById('tch_lastname');
const tch_name = document.getElementById('tch_name');
const tch_phone = document.getElementById('tch_phone');
const first_alph = document.getElementById('first_alph');
const second_alph = document.getElementById('second_alph');
const third_alph = document.getElementById('third_alph');
const tch_bday = document.getElementById('tch_bday');
const textarea1 = document.getElementById('textarea1');

我正在檢查它們是否有價值

 function checkEmpty(check) {
        for (i = 0; i < check.length; i++) {
            if (check[i].value == "" || check[i].value == " " || check[i].value == null) {
                check[i].classList.add('inputErrorBorder')
            } else {
                check[i].classList.remove('inputErrorBorder')
            }
        }
    }

//mainInfo按鈕id

  mainInfo.addEventListener('click', () => {
            test = [tch_family_name, tch_lastname, tch_name, tch_phone, first_alph, second_alph, third_alph, tch_bday, textarea1]
            checkEmpty(test) 
})

現在當所有輸入都有價值時如何做某事;

我嘗試了else if()但它給出了不正確的結果,例如當第一個輸入不值時,它不會將inputErrorBorder class 添加到第二個或第三個輸入。

請幫忙;

將其添加到當前設置的最簡單方法之一是將標志變量添加到checkEmpty function 並返回該值。 然后在EventListener中處理結果

帶有checkEmpty標志的hasEmpty

function checkEmpty(check) {
    let hasEmpty = false;
    for (let i = 0; i < check.length; i++) {
        if (check[i].value === "" || check[i].value === " " || check[i].value == null) {
            check[i].classList.add('inputErrorBorder');
            hasEmpty = true;
        } else {
            check[i].classList.remove('inputErrorBorder');
        }
    }
    return hasEmpty;
}

使用hasEmpty中的checkEmpty標志

mainInfo.addEventListener('click', () => {
    let test = [tch_family_name, tch_lastname, tch_name, tch_phone,
        first_alph, second_alph, third_alph, tch_bday, textarea1];
    let hasEmpty = checkEmpty(test);
    if (!hasEmpty) {
        // All Have Value
    } else {
        // Something has missing value
    }
})

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM