JavaScript 関数を使用してフォームを自動入力および検証する

フォームの自動入力と検証のための JavaScript 関数の実装

Web 開発では、フォームは非常に一般的な要素であり、多くの場合フォームの入力と検証が必要になります。 JavaScript 関数を使用すると、フォームの自動入力および検証機能を簡単に実現でき、ユーザー エクスペリエンスとデータの精度が向上します。この記事では、JavaScript 関数を使用してフォームの自動入力と検証を実装する方法と、具体的なコード例を紹介します。

1. 自動入力フォーム

自動入力フォームを使用すると、ユーザーがフォームに入力する際の面倒な手動入力が軽減され、効率が向上します。通常、名前、電子メール、電話番号などのユーザーの情報を事前に保存しておくと、ユーザーが Web ページにアクセスしたときに、この情報が対応するフォームに自動的に入力されます。

サンプル コードは次のとおりです:

// 假设用户信息存储在一个对象中
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 関数を呼び出すだけです。

2. フォームの検証

フォームの検証は、悪意のある送信やデータ エラーを防ぐために、ユーザーが入力した情報が特定のルールまたは形式に準拠していることを確認することです。一般的なフォーム検証には、必須フィールドの検証、電子メール形式の検証、携帯電話番号形式の検証などが含まれます。

サンプル コードは次のとおりです。

// 表单验证
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 関数を呼び出しました。 submit ボタンのイベントを取得し、 return キーワードを使用して関数の戻り値を受け取ります。 true が返された場合はフォームの送信が許可され、false が返された場合はフォームの送信が禁止されます。

概要:

JavaScript 関数を使用してフォームの自動入力と検証を実現することで、ユーザーがフォームをより便利かつ正確に入力できるようになります。上記のコードは、自動フォーム入力とフォーム検証の具体的な実装を提供しており、実際のニーズに応じて変更および拡張できます。この記事がお役に立てば幸いです!

以上がJavaScript 関数を使用してフォームを自動入力および検証するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。