データ検証に JavaScript と正規表現を使用する方法
データ検証は、Web アプリケーションがクライアントからデータを受け入れるための重要なステップです。結局のところ、顧客データが使用する前に、期待される形式に準拠していることを確認する必要があります。 Web アプリケーションでは、ASP.NET、JSP などのプラットフォーム固有のツールを使用することも、JavaScript の正規表現を利用してデータ検証の作業を簡素化することもできます。
正規表現
正規表現は、テキスト内のパターンを表現できるパターン マッチング ツールであり、正規表現をテキスト データを検証するための強力なツールにします。パターン マッチングに加えて、正規表現をテキストの置換にも使用できます。私が UNIX システムで Perl を使用しているときに正規表現に初めて出会って以来、正規表現のサポートは拡大し続けています。
注: 周りに他の開発者がたくさんいる場合、正規表現は RegEx または RegExp と呼ばれる場合があります。正規表現は強力ですが、その構文は少し「謎」で、使いこなすには時間がかかります。正規表現の使用に関する基本的な知識を見てみましょう。
基本構文
正規表現の構文は適用するのが非常に複雑で、このトピックを説明するには本が 1 冊かかることもありますが、正規表現の予備的な理解を助けるために、基本的な知識のいくつかを説明します。
基本的な概念はアンカーです。これを使用すると、文字列の開始点と終了点を指定できます。キャレット (^) は文字列の開始点を指定するために使用され、ドル記号 ($) は終了点を示します。クエリ文字列にキャレットまたはドル記号を含める必要がある場合は、エスケープ文字 () がキャレットまたはドル記号より優先されます。次の例では、文字列内に単語が出現するたびに検索に一致します。
^search$
さらに、文字のグループを検索することもできます。文字を [ や ] などの角かっこで囲むだけです。一致する文字はこの文字グループに属している必要があります。例は [12345] 一致の検索にあります1 ～ 5 の範囲の数値。この正規表現は [1-5] と書くこともできます。
多くの場合、複数回出現できる文字またはオプションの文字を指定する必要があります。疑問符 (?) はその文字がオプションであることを意味し、プラス記号 (+) はその文字が 1 回または複数回出現できることを意味します。 、アスタリスク (*) は、その文字が出現しない、または複数回出現する可能性があることを意味します。
それでは、これらの単純な正規表現を JavaScript に適用する方法を見てみましょう。
JavaScript のサポート
JavaScript はバージョン 1.2 で正規表現のサポートを追加しました。ブラウザのサポートは Internet Explorer 4 と Netscape 4 から始まりました。Firefox のすべてのバージョンと最新のブラウザには JavaScript のサポートが含まれています。正規表現は、JavaScript 文字列および RegExp を通じて使用できます。
文字列の操作
すべての JavaScript 文字列は 3 つのメソッドを通じて正規表現をサポートできます。これらの 3 つのメソッドは match()、replace()、search() です。また、オブジェクトの test() メソッドを使用してテストを実行することもできます。以下は、match()、replace()、および search() メソッドに関する情報です:
match(): 正規表現の一致に使用され、複数の一致が発生した場合、すべての一致結果を含む配列が返されます。各エントリはコピーです。一致するデータが含まれており、一致する値がない場合は null 値が返されます。
replace(): 正規表現を照合し、一致するすべての値を新しい部分文字列に置き換えるのに使用されます。このメソッドの最初のパラメーターは正規表現で、2 番目のパラメーターは置換される文字列です。
search(): 正規表現と指定された文字列の間で一致する値を検索するために使用されます。一致する値が存在しない場合は、文字列のインデックス値が返されます。
JavaScript は、正規表現を作成して使用するための RegExp オブジェクトも提供します。
RegExp
RegExp オブジェクトには正規表現パターンが含まれており、このオブジェクトのメソッドとプロパティを使用して文字列を照合できます。 RegExp オブジェクトのインスタンスを作成するには、コンストラクターを使用する方法と正規表現テキスト パターンを使用する方法があります。 2 番目のパラメータはオプションで、検索がグローバル (g)、大文字と小文字を区別しない (i)、または両方を区別する (gi) かを指定できます。次の例では、コンストラクターを使用して RegExp オブジェクトを作成します。この例では、検索オブジェクトの大文字と小文字は無視されます。
testRegExp = new RegExp("^search$","I")以下に示すように、リテラル メソッド (スラッシュ内の部分) を使用して同じインスタンスを作成できます。
testRegExp = /^search$/i
RegExp オブジェクトには多数のメソッドが含まれていますが、そのうちの 1 つである test のみを紹介します。このメソッドは、指定された文字列に対して正規表現の一致を実行し、成功した場合は true を返し、失敗した場合は false を返します。このメソッドは基本的に、文字列の一致を正規化することができます。このメソッドの使用方法を示します:
testRegExp = /search/i;
if (testRegExp.test("this is a search string") {
document.write("The string was found.");
} else {
document.write("No match found.");
}
We can place it in a Web page to test:
<html><head>
<title>RegExp test</title>
</head><body>
<script language="javascript">
testRegExp = /search/i;
if (testRegExp.test("this is a search string")) {
alert("The string was found.");
} else {
alert("No match found.");
}
</script></body></html>实际操作
现在是讲解更加完整的例子的时候了，在列表A中的网页包含了JavaScript方法来验证文本框中输入的值，这段JavaScript代码将搜索包含我的姓氏和我的两个名字的字符串(忽略大小写)，如果找到了我的名字，则通过字符串对象的替换方法(search)将其替换为一个短名字。第二个文本框是用于接受时间值的，一个正则表达式在此对输入的时间进行合法性验证(数字是通过冒号分割的)。这个简单的例子说明了如何在您的客户端代码中加入正则表达式来进行匹配和替换：
<html><head>
<title>RegExp validation</title>
<script language="JavaScript">
function validate() {
var doc = document.test;
varvalName = new RegExp("^(Tony|Anthony) Patton", "i");
if (doc.Name.value.match(valName) == null) {
alert("Name was not found.");
} else {
doc.Name.value = doc.Name.value.replace(valName, "T. Patton");
}
varvalTime = new RegExp("^([0-1][0-9]|[2][0-3]):([0-5][0-9])$");
if (doc.time.value.match(valTime) == null) {
alert("Please enter correct time format (hh:ss)");
} }
</script></head>
<body><form name="test">
Name: <input type="text" name="Name" value=""><br>
Time: <input type="text" name="time" value=""><br>
<input type="button" name="test" value="test" onClick="validate();">
</form></body></html>强大而复杂
正则表达式的功能确实很强大，但是使用起来也并不简单，因此，应当循序渐进地学习，当然，它确实值得您花上一些时间来学习如何正确使用。正则表达式为JavaScript (以及其他的语言)操作文本，通用软件进行表单验证提供了一个简单而优雅的方法。
更多如何使用JavaScript和正则表达式进行数据验证相关文章请关注PHP中文网！
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7564
15
1386
52
86
11
28
99
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
誰がより多くのPythonまたはJavaScriptを支払われますか？
Apr 04, 2025 am 12:09 AM
スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。
JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？
Apr 04, 2025 pm 05:09 PM
同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...
javascriptの分解：それが何をするのか、なぜそれが重要なのか
Apr 09, 2025 am 12:07 AM
JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？
Apr 04, 2025 pm 05:12 PM
Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...
初心者向けのタイプスクリプト、パート2：基本データ型
Mar 19, 2025 am 09:10 AM
エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル（ES6によって導入）とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。 ヌルデータ型 JavaScriptのように、Typescriptのnull
Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？
または：
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？
Apr 04, 2025 pm 05:36 PM
この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。
PowerPointはJavaScriptを実行できますか？
Apr 01, 2025 pm 05:17 PM
JavaScriptはPowerPointで実行でき、外部JavaScriptファイルを呼び出したり、VBAを介してHTMLファイルを埋め込んだりすることで実装できます。 1. VBAを使用してJavaScriptファイルを呼び出すには、マクロを有効にし、VBAプログラミングの知識を持つ必要があります。 2。JavaScriptを含むHTMLファイルを埋め込みます。これは、シンプルで使いやすいが、セキュリティ制限の対象となります。利点には、拡張機能と柔軟性が含まれますが、欠点にはセキュリティ、互換性、複雑さが含まれます。実際には、セキュリティ、互換性、パフォーマンス、ユーザーエクスペリエンスに注意を払う必要があります。
