JavaScript 中的單選按鈕驗證
本文將討論 JavaScript 中的單選按鈕驗證。
JavaScript 中的單選按鈕驗證
<input> 單選專案通常用於單選組，單選按鈕的集合，描述一組相關選項。一次只能選擇給定組中的一個選項。
如果要選擇多個選項，請使用 Checkbox 而不是 RadioButton。單選按鈕通常表示為選中時填充或突出顯示的小圓圈。
語法：
<input type="radio">
通過為組中的每個選項按鈕賦予相同的名稱來定義選項組。設定選項組後，選擇選項按鈕會取消選擇同一組中所有當前選擇的選項按鈕。
你可以在一個頁面上擁有任意數量的選項組，只要每個組都有其唯一的名稱。提交表單時，你應該始終指定 value 屬性以將資訊傳遞到伺服器。
如果未指定 value 屬性，表單資料將為整個單選組分配值 on。
讓我們舉一個例子，我們詢問使用者的性別。
建立三個單選按鈕，將 name 屬性設定為 gender，並具有 Male、Female 和 Other 值。該表格應使用性別進行驗證，如果沒有性別，則應發出警報。
<form onsubmit="return (checkForm())" name="userForm">
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="Other">
<label for="other">Other</label>
<br>
<input type="submit" value="Submit">
</form>
function checkForm() {
let chosenOption = "";
const len = document.userForm.gender.length;
for (i = 0; i < len; i++) {
if (document.userForm.gender[i].checked) {
chosenOption = document.userForm.gender[i].value
}
}
if (chosenOption == "") {
alert("Please choose your gender!");
return false;
} else {
console.log(chosenOption)
}
}
在示例中，我們首先檢查了選項的長度。之後，我們遍歷選項並檢查是否檢查了任何選項。
如果不是，我們返回 false 並向使用者顯示警報以填寫選項。
當你在任何瀏覽器中執行程式碼時，它將呈現表單。選擇性別並按提交；它將列印性別。
如果沒有選擇性別，它會提示選擇性別。
輸出:(選擇選項時）
"Female"
輸出：（當沒有選擇選項時）
你可以在此處執行本教程中討論的程式碼。
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn