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

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 までご連絡ください。
如何使用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

如何使用Golang实现Web应用程序的表单验证如何使用Golang实现Web应用程序的表单验证Jun 24, 2023 am 09:08 AM

表单验证是Web应用程序开发中非常重要的一个环节,它能够在提交表单数据之前对数据进行有效性检查,避免应用程序出现安全漏洞和数据错误。使用Golang可以轻松地实现Web应用程序的表单验证,本文将介绍如何使用Golang来实现Web应用程序的表单验证。一、表单验证的基本要素在介绍如何实现表单验证之前,我们需要知道表单验证的基本要素是什么。表单元素:表单元素是指

Laravel开发:如何使用Laravel Validation验证表单请求?Laravel开发:如何使用Laravel Validation验证表单请求?Jun 13, 2023 pm 01:34 PM

Laravel是一个流行的PHPWeb开发框架,它提供了很多方便的功能来加快开发者的工作。其中,LaravelValidation是一种非常实用的功能,它可以帮助我们轻松地验证表单请求和用户输入的数据。本文就将介绍如何使用LaravelValidation验证表单请求。什么是LaravelValidationLaravelValidation是La

php如何使用CodeIgniter4框架?php如何使用CodeIgniter4框架?May 31, 2023 pm 02:51 PM

PHP是一种非常流行的编程语言,而CodeIgniter4是一种常用的PHP框架。在开发Web应用程序时,使用框架是非常有帮助的,它可以加速开发过程、提高代码质量、降低维护成本。本文将介绍如何使用CodeIgniter4框架。安装CodeIgniter4框架CodeIgniter4框架可以从官方网站(https://codeigniter.com/)下载。下

PHP表单验证技巧:如何使用filter_input函数检验用户输入PHP表单验证技巧:如何使用filter_input函数检验用户输入Aug 01, 2023 am 08:51 AM

PHP表单验证技巧:如何使用filter_input函数检验用户输入引言:在开发Web应用程序时,表单是与用户进行交互的重要工具。而正确地验证用户输入,是保证数据的完整性和安全性的关键步骤之一。PHP提供了filter_input函数,可以方便地对用户输入进行验证和过滤。本文将介绍如何使用filter_input函数来检验用户输入,并提供相关的代码示例。一、

PHP中的表单验证和过滤方法?PHP中的表单验证和过滤方法?Jun 29, 2023 pm 10:04 PM

PHP作为一种广泛应用于Web开发的脚本语言,其表单验证和过滤是非常重要的一部分。在用户提交表单的过程中,需要对用户输入的数据进行验证和过滤,以确保数据的安全性和有效性。本文将介绍PHP中如何进行表单验证和过滤的方法和技巧。一、表单验证表单验证是指对用户输入的数据进行检查,以确保数据符合特定的规则和要求。常见的表单验证包括对必填项的验证、邮箱格式、手机号码格

ThinkPHP6如何进行表单验证操作?ThinkPHP6如何进行表单验证操作?Jun 12, 2023 am 09:36 AM

ThinkPHP6是一款基于PHP的MVC框架,极大地简化了Web应用程序的开发。其中表单验证是一个非常基础和重要的功能。在这篇文章中,我们将介绍ThinkPHP6中如何进行表单验证操作。一、验证规则定义在ThinkPHP6中,验证规则都需要定义在控制器中,我们可以通过在控制器中定义一个$validate属性来实现规则的定义,如下所示:usethinkVa

Golang学习之Web应用程序的表单验证实践Golang学习之Web应用程序的表单验证实践Jun 24, 2023 pm 03:07 PM

在Web开发中,表单验证是一个极其关键的部分。表单验证可以有效地保护数据的安全性,防止非法用户的攻击和恶意操作。在Golang中,表单验证技术也应用广泛,特别是在Web应用程序中。本文将介绍Golang中Web应用程序的表单验证实践。一、表单验证的基本原理在Web应用程序中,表单验证的基本原理是在Web页面提交数据之前进行数据的检查和验证。这些数据可能是用户

See all articles

ホット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ヘンタイを無料で生成します。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 中国語版

SublimeText3 中国語版

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

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、