ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript フォーム検証に関する関連説明

JavaScript フォーム検証に関する関連説明

jackloveオリジナル: 2018-05-07 10:45:221458ブラウズ

JavaScript フォーム検証は Web サイトのログインと登録において重要な役割を果たすため、この記事ではそれについて詳しく説明します。

JavaScript フォームの検証

JavaScript を使用すると、データがサーバーに送信される前に、HTML フォーム内のこれらの入力データを検証できます。

フォームデータは、その正確性を検証するために JavaScript を必要とすることがよくあります:

フォームデータが空かどうかを確認しますか?

入力したメールアドレスが正しいことを確認しますか?

日付が正しく入力されているか確認してください?

フォーム入力内容が数値かどうかを確認しますか?

必須（または必須）項目

次の関数は、ユーザーがフォームに必須（または必須）項目を入力したかどうかを確認するために使用されます。必須であるか、必須フィールドが空の場合、警告ボックスが表示され、関数の戻り値は false になります。それ以外の場合、関数の戻り値は true (データに問題がないことを意味します) になります。

function validateForm(){
  var x=document.forms["myForm"]["fname"].value;  if (x==null || x=="")
  {
    alert("姓必须填写");    return false;  }}

上記の関数は、フォームが送信されるときに呼び出されます。呼び出し:

インスタンス

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">姓: <input type="text" name="fname"><input type="submit" value="提交"></form>

電子メール検証

次の関数は、入力されたデータが電子メールアドレスの基本構文に準拠しているかどうかを確認します。

これは、入力データには @ 記号とピリオド (.) が含まれている必要があることを意味します。同時に、@ を電子メールアドレスの最初の文字にすることはできず、@ の後に少なくとも 1 つのピリオドが必要です:

function validateForm(){
  var x=document.forms["myForm"]["email"].value;  var atpos=x.indexOf("@");  var dotpos=x.lastIndexOf(".");  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一个有效的 e-mail 地址");    return false;  }}

以下は、HTML フォームを含む完全なコードです:

例

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
    Email: <input type="text" name="email">
    <input type="submit" value="提交"></form>

この記事JavaScript のフォーム検証についてある程度の知識があります。詳しい学習資料については、php 中国語の Web サイトを参照してください。

JavaScript フォーム検証に関する関連説明

関連記事