データ検証に 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）
ホットトピック
7321
9
1625
14
1349
46
1261
25
1209
29
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
カスタムGoogle検索APIセットアップチュートリアル
Mar 04, 2025 am 01:06 AM
このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です！検索をyに制限することができます
例JSONファイルの例
Mar 03, 2025 am 12:35 AM
この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます
10 jQuery構文蛍光物
Mar 02, 2025 am 12:32 AM
コードプレゼンテーションを強化する：開発者向けの10個の構文蛍光物 ウェブサイトやブログでコードスニペットを共有することは、開発者にとって一般的な慣行です。 適切な構文ハイライターを選択すると、読みやすさと視覚的な魅力を大幅に改善できます。 t
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
8見事なjQueryページレイアウトプラグイン
Mar 06, 2025 am 12:48 AM
楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます
＆＃x27; this＆＃x27; JavaScriptで？
Mar 04, 2025 am 01:15 AM
コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした
10 JavaScript＆JQuery MVCチュートリアル
Mar 02, 2025 am 01:16 AM
この記事では、JavaScriptとJQuery Model-View-Controller（MVC）フレームワークに関する10を超えるチュートリアルの厳選された選択を紹介します。これは、新年にWeb開発スキルを向上させるのに最適です。 これらのチュートリアルは、Foundatioのさまざまなトピックをカバーしています
