ホームページ > 記事 > ウェブフロントエンド > データ検証に JavaScript と正規表現を使用する方法
データ検証に JavaScript と正規表現を使用する方法
- 高洛峰オリジナル
- 2017-01-14 09:55:041083ブラウズ
データ検証は、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中文网！