使用JavaScript函數實現表單自動填充和驗證

表單自動填入和驗證的JavaScript函數實作

在網頁開發中，表單是非常常見的元素，我們經常需要對表單進行填充和驗證。使用JavaScript函數可以輕鬆實現表單的自動填充和驗證功能，提高使用者體驗和資料的準確性。在本文中，我將介紹如何使用JavaScript函數實作表單自動填入和驗證，並提供具體的程式碼範例。

一、自動填入表單

自動填入表單可以讓使用者在填寫表單時減少手動輸入的繁瑣，提高效率。通常，我們可以透過預先儲存使用者的信息，如姓名、郵箱、電話等，然後在使用者造訪網頁時將這些資訊自動填入對應的表單中。

範例程式碼如下：

// 假设用户信息存储在一个对象中
var userInfo = {
  name: "张三",
  email: "zhangsan@example.com",
  phone: "123456789"
};

// 自动填充表单
function autoFillForm() {
  document.getElementById("name").value = userInfo.name;
  document.getElementById("email").value = userInfo.email;
  document.getElementById("phone").value = userInfo.phone;
}

// 在页面加载完成后调用自动填充函数
window.onload = function() {
  autoFillForm();
};

在上述程式碼中，我們首先定義了一個儲存使用者資訊的物件userInfo，包含了姓名、信箱和電話的值。然後透過自動填入表單的函數autoFillForm，我們可以將這些值賦給對應表單元素的value屬性，實現自動填入的效果。最後，在頁面載入完成後呼叫autoFillForm函數即可。

二、表單驗證

表單驗證是為了確保使用者填寫的資訊符合一定的規則或格式，防止惡意提交或資料錯誤。常見的表單驗證包括：必填項目驗證、信箱格式驗證、手機號碼格式驗證等。

範例程式碼如下：

// 表单验证
function formValidation() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var phone = document.getElementById("phone").value;

  // 验证姓名是否为空
  if (name === "") {
    alert("请输入姓名！");
    return false;
  }

  // 验证邮箱格式
  var emailPattern = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
  if (!emailPattern.test(email)) {
    alert("请输入有效的邮箱地址！");
    return false;
  }

  // 验证手机号格式
  var phonePattern = /^1[3456789]d{9}$/;
  if (!phonePattern.test(phone)) {
    alert("请输入有效的手机号码！");
    return false;
  }

  // 验证通过，可提交表单
  alert("提交成功！");
  return true;
}

在上述程式碼中，我們透過取得表單中各個輸入框的值，並應用正規表示式進行對應的驗證。如果驗證不通過，則彈出提示訊息並傳回false，阻止表單提交；如果驗證通過，則彈出提交成功的提示訊息並傳回true，允許表單提交。

要使用表單驗證函數，可以在表單的提交按鈕上新增onclick事件，實作如下：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" required>

  <label for="phone">电话：</label>
  <input type="tel" id="phone" required>

  <input type="submit" value="提交" onclick="return formValidation()">
</form>

在上述程式碼中，我們在提交按鈕的onclick事件中呼叫了formValidation函數，並使用return關鍵字接收函數的回傳值。如果傳回的是true，則允許表單提交；如果傳回的是false，則阻止表單提交。

總結：

透過使用JavaScript函數實現表單的自動填入和驗證，我們可以讓使用者填寫表單更加方便和準確。上述程式碼提供了自動填入表單和表單驗證的具體實現，可以根據實際需求進行修改和擴展。希望這篇文章對你有幫助！

以上是使用JavaScript函數實現表單自動填充和驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！