今天要和大家分享的是關于JavaScript通訊錄添加的知識。通訊錄作為我們日常生活中的重要工具，隨著互聯網和智能手機的發展，也變得越來越智能、方便。很多的通訊錄軟件都提供了添加聯系人的功能，下面我們就來看看如何使用JavaScript實現通訊錄添加。

首先，我們需要在頁面中添加幾個input輸入框來獲取用戶輸入的信息，例如姓名、手機號碼、電子郵件地址等等。輸入框的代碼如下：

<label for="name">姓名：</label>
<input type="text" id="name" name="name" required><br>
<label for="phone">電話：</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{11}" required><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email" required><br>

我們使用了input標簽，并為每一個輸入框設置了必須填寫(required)的屬性，同時為電話號碼的輸入框增加了正則表達式的(pattern)校驗，確保用戶輸入的格式正確。接下來是添加聯系人的按鈕代碼：

<button id="add-contact">添加聯系人</button>

當用戶填寫完畢所有信息后，點擊添加聯系人按鈕，便可以將輸入的信息存儲在一個數組中，例如：

let contactList = [{
name: '張三',
phone: '13688888888',
email: 'zhangsan@qq.com'
}, {
name: '李四',
phone: '13777777777',
email: 'lisi@qq.com'
}];

每一個聯系人都是一個對象，包含姓名、電話、郵箱等屬性。那么，如何將用戶輸入的信息添加到數組中呢？我們需要在添加聯系人按鈕的點擊事件中編寫相應的代碼：

let addBtn = document.getElementById('add-contact');
addBtn.addEventListener('click', function() {
let name = document.getElementById('name').value;
let phone = document.getElementById('phone').value;
let email = document.getElementById('email').value;
if (name && phone && email) { // 驗證用戶輸入是否為空
let contact = {
name,
phone,
email
};
contactList.push(contact); // 將新的聯系人對象添加到數組中
console.log(contactList);
} else {
alert('請完善輸入信息');
}
});

在點擊添加聯系人按鈕時，我們首先獲取每個輸入框中用戶的輸入值，并判斷是否為空。如果都不為空，就創建一個新的聯系人對象，并將其添加到數組中。如果有輸入框為空，就彈出提示框，要求用戶完善信息。最后，我們把聯系人數組打印到控制臺，便可查看添加聯系人的效果。

通過以上的代碼，我們已經實現了一個簡單的通訊錄添加功能。當然，這只是一個基礎版的實現，還可以根據實際需求增加其他功能，例如：刪除聯系人、編輯聯系人等等。希望大家能夠熟練掌握JavaScript的相關知識，不斷拓展自己的編程技能。