JS驗證輸入框的内容是否為空方法

驗證輸入框的内容是否為空然後給出判斷資訊的兩種方法

1.在HTML中建立一個div，建立一個變量x擷取輸入框裡value的值，如果x===""，div.innerHTML=“輸入提示資訊"否則div.innerHTML=”";`

let value = document.querySelector("#psw").value;
    if ((value.trim()) === "") {
        errortip.innerHTML = "密碼不可以為空";
    } else {
        errortip.innerHTML = "";
    }
           

2.不在HTML裡建立div，通過js在父元素裡建立一個節點createElement()，該節點的值=提示資訊，再appendChild()把該節點添加到父元素中（可以添加邏輯驗證：當子節點<2時添加進去子節點，否則把添加的最後一個節點删除掉）

let value = document.querySelector(".nicheng").value;
    if ((value.trim()) === "") {
        let e = document.createElement('div');
        e.innerHTML = "昵稱不可以為空";
        if (fenge.childElementCount < 2) {
            fenge.appendChild(e);
        } else {
            if (fenge.childElementCount > 1) {
                fenge.removeChild(fenge.lastChild);
            }
        }
    }
           

與html相關聯的方式

1.document.getElementById()

document.getElementById("box").children[0].children;
           

獲得id='box’的第1個節點的所有節點；

2.document.getElementsByTagName()得到的是個數組

document.getElementsByTagName("ul")[0].children;
document.getElementById('nav').firstElementChild.children;
           

獲得第1個ul标簽的所有節點；

3.document.querySelector()括号裡面寫css文法

手動自定義标簽屬性的話在js裡要用input.getAttribute(‘sex’)獲得

給擷取到的li指派:

let liList = document.getElementsByTagName('ul')[0].children;
for(let i = 0;i<liList.length;i++){
    liList[i].setAttribute('index',i);
    console.log(liList[i].getAttribute('index'));
}