CSS表單非空驗證

CSS可以使表單驗證更加美觀和友好。我們經常需要在我們的表單中添加一些必填字段，以確保用戶填寫所需的信息。CSS可以很好地實現這個功能，下面我們來介紹一下如何在表單中使用CSS實現非空驗證。

form input[required]:invalid{
border-color: red;
}
form input:not([type="submit"]):valid{
border-color: green;
}

上面的代碼塊為表單的輸入框增加了必填項的驗證。當用戶沒有填寫必填項時，輸入框的邊框將變成紅色。

同時，當用戶已經填寫完必填項并提交表單時，輸入框的邊框將變成綠色。

form input[type="submit"]:disabled{
background-color: gray;
}
form input[type="submit"]:not(:disabled){
background-color: blue;
}

上面的代碼塊為表單的提交按鈕增加了必填項的驗證。當用戶沒有填寫必填項時，提交按鈕將被禁用，背景顏色將變成灰色。

當用戶已經填寫完必填項并提交表單時，提交按鈕將可用，背景顏色將變成藍色。

除了使用CSS來美化表單驗證，我們還可以為驗證的信息設置一些樣式，這將使驗證信息更具人性化的提示。

form input[required]:invalid + p {
color: red;
}
form input:not([type="submit"]):valid + p {
color: green;
}

上面的代碼塊為表單驗證的提示信息增加了色彩。當用戶沒有填寫必填項時，提示信息的顏色將變成紅色，當用戶已經填寫完必填項時，提示信息的顏色將變成綠色。

這些CSS樣式將使表單驗證更加人性化，讓用戶更容易理解必填項的作用。我們可以根據自己的需求對CSS樣式進行調整，以達到更好的表單驗證效果。