ホームページ ウェブフロントエンド jsチュートリアル JavaScript フォーム検証百科事典_JavaScript スキル

JavaScript フォーム検証百科事典_JavaScript スキル

May 16, 2016 pm 03:45 PM
フォームの検証

JavaScript で検証される典型的なフォーム データは次のとおりです:

1. ユーザーはフォームに必須項目を入力しましたか?

2. ユーザーが入力したメールアドレスは合法ですか?

3. ユーザーは法定日付を入力しましたか?

4. ユーザーが数値フィールドにテキストを入力しましたか?

ユーザー名とパスワードの確認コードは次のとおりです:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function validateForm()
{
 var username = document.forms["myForm"]["username"].value;
 var password = document.forms["myForm"]["password"].value;
 alert(username+" "+password);
}
</script>
</head>
<body>
<form name="myForm" action="" onSubmit=" return validateForm()" method="post">
用户名:<input type="text" name="username"/><br/>
密码:<input type="password" name="password"/><br/>
 <input type="submit" value="提交"/>
</form>
</body>
</html>
ログイン後にコピー

必須 (または必須) アイテムの確認:

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

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
 {alert(alerttxt);return false}
else {return true}
}
}
ログイン後にコピー

HTML フォームのコードは次のとおりです:

<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
 {
 if (value==null||value=="")
 {alert(alerttxt);return false}
 else {return true}
 }
}
function validate_form(thisform)
{
with (thisform)
 {
 if (validate_required(email,"Email must be filled out!")==false)
 {email.focus();return false}
 }
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>
</html>
ログイン後にコピー

電子メール認証

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

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

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
 {alert(alerttxt);return false}
else {return true}
}
}
ログイン後にコピー

HTML フォームを含む完全なコードは次のとおりです:






Email:
ログイン後にコピー

上記のコードは、ユーザー名、パスワード、必須フィールド、必須オプション、電子メール、およびフォームのコードです。これが、JavaScript フォームの検証を学ぶ皆さんの役に立つことを願っています。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Flask-WTF を使用してフォーム検証を実装する方法 Flask-WTF を使用してフォーム検証を実装する方法 Aug 03, 2023 pm 06:53 PM

Flask-WTF を使用してフォーム検証を実装する方法 Flask-WTF は、Web フォーム検証を処理するための Flask 拡張機能であり、ユーザーが送信したデータを検証するための簡潔かつ柔軟な方法を提供します。この記事では、Flask-WTF 拡張機能を使用してフォーム検証を実装する方法を説明します。 Flask-WTF のインストール Flask-WTF を使用するには、まずインストールする必要があります。 pip コマンドを使用してインストールできます。 pipinstallFlask-WTF 必要なモジュールを F にインポートします。

Laravel 開発: Laravel Validation を使用してフォームリクエストを検証する方法? Laravel 開発: Laravel Validation を使用してフォームリクエストを検証する方法? Jun 13, 2023 pm 01:34 PM

Laravel は、開発者の作業をスピードアップするための便利な機能を多数提供する人気の PHP Web 開発フレームワークです。その中でも、LaravelValidation は、フォームリクエストやユーザーが入力したデータを簡単に検証するのに役立つ非常に実用的な関数です。この記事では、LaravelValidation を使用してフォームリクエストを検証する方法を紹介します。 LaravelValidationとはLaravelValidationとはLa

PHPでCodeIgniter4フレームワークを使用するにはどうすればよいですか? PHPでCodeIgniter4フレームワークを使用するにはどうすればよいですか? May 31, 2023 pm 02:51 PM

PHP は非常に人気のあるプログラミング言語であり、CodeIgniter4 は一般的に使用される PHP フレームワークです。 Web アプリケーションを開発する場合、フレームワークを使用すると、開発プロセスのスピードアップ、コードの品質の向上、メンテナンス コストの削減が可能になり、非常に役立ちます。この記事ではCodeIgniter4フレームワークの使い方を紹介します。 CodeIgniter4 フレームワークのインストール CodeIgniter4 フレームワークは、公式 Web サイト (https://codeigniter.com/) からダウンロードできます。下

Golang を使用して Web アプリケーションのフォーム検証を実装する方法 Golang を使用して Web アプリケーションのフォーム検証を実装する方法 Jun 24, 2023 am 09:08 AM

フォーム検証は Web アプリケーション開発において非常に重要なリンクであり、フォーム データを送信する前にデータの有効性をチェックして、アプリケーションのセキュリティ脆弱性やデータ エラーを回避できます。 Web アプリケーションのフォーム検証は、Golang を使用すると簡単に実装できます。この記事では、Golang を使用して Web アプリケーションのフォーム検証を実装する方法を紹介します。 1. フォーム検証の基本要素 フォーム検証の実装方法を紹介する前に、フォーム検証の基本要素が何であるかを知る必要があります。フォーム要素: フォーム要素は

PHP フォーム検証のヒント: filter_input 関数を使用してユーザー入力を検証する方法 PHP フォーム検証のヒント: filter_input 関数を使用してユーザー入力を検証する方法 Aug 01, 2023 am 08:51 AM

PHP フォーム検証のヒント: filter_input 関数を使用してユーザー入力を検証する方法 はじめに: Web アプリケーションを開発する場合、フォームはユーザーと対話するための重要なツールです。ユーザー入力を正しく検証することは、データの整合性とセキュリティを確保するための重要な手順の 1 つです。 PHP には、ユーザー入力を簡単に検証してフィルタリングできる filter_input 関数が用意されています。この記事では、filter_input 関数を使用してユーザー入力を検証する方法を紹介し、関連するコード例を示します。 1つ、

Laravelでミドルウェアを使用してフォーム検証を処理する方法 Laravelでミドルウェアを使用してフォーム検証を処理する方法 Nov 02, 2023 pm 03:57 PM

ミドルウェアを使用して Laravel でフォーム検証を処理する方法、特定のコード例が必要です はじめに: フォーム検証は Laravel で非常に一般的なタスクです。ユーザーが入力したデータの有効性と安全性を確保するために、当社は通常、フォームに送信されたデータを検証します。 Laravel は便利なフォーム検証機能を提供しており、フォーム検証を処理するためのミドルウェアの使用もサポートしています。この記事では、ミドルウェアを使用してLaravelでフォーム検証を処理する方法を詳しく紹介し、具体的なコード例を示します。

PHP でのフォーム検証とフィルタリングの方法は? PHP でのフォーム検証とフィルタリングの方法は? Jun 29, 2023 pm 10:04 PM

PHP は Web 開発で広く使用されているスクリプト言語であり、そのフォーム検証とフィルタリングは非常に重要な部分です。ユーザーがフォームを送信するとき、データのセキュリティと有効性を確保するために、ユーザーが入力したデータを検証およびフィルタリングする必要があります。この記事では、PHP でフォームの検証とフィルタリングを実行する方法とテクニックを紹介します。 1. フォーム検証 フォーム検証とは、ユーザーが入力したデータをチェックして、データが特定のルールおよび要件に準拠していることを確認することを指します。一般的なフォーム検証には、必須フィールド、電子メール形式、携帯電話番号形式の検証が含まれます。

ThinkPHP6 でフォーム検証を実行するにはどうすればよいですか? ThinkPHP6 でフォーム検証を実行するにはどうすればよいですか? Jun 12, 2023 am 09:36 AM

ThinkPHP6 は、Web アプリケーションの開発を大幅に簡素化する PHP ベースの MVC フレームワークです。その中でもフォームバリデーションは非常に基本的かつ重要な機能です。この記事では、ThinkPHP6 でフォーム検証操作を実行する方法を紹介します。 1. 検証ルールの定義 ThinkPHP6 では、コントローラ内で検証ルールを定義する必要があります。以下に示すように、コントローラ内で $validate 属性を定義することでルールを定義できます。

See all articles