JavaScript フォーム検証 - 正規表現の解明_JavaScript スキル

推奨読書: JavaScript フォーム検証の長さ

JavaScript フォーム検証 - フォーム送信

JavaScript フォーム検証 - 正規表現の最初の紹介

前回の記事では、JavaScript フォーム検証 - はじめての正規表現入門 について紹介しました。この記事では、JavaScript フォーム検証 - 正規表現のベールを脱ぎます。全文をお読みください。詳細。 。

対応する文字タイプに一致するメタキャラクターを使用します

正規表現の作成は、正規表現が「/」のペア内に出現することを除けば、文字列リテラルの作成に少し似ています

第 1 レベルのメタ文字は、文字と数字を接続するために正規表現で使用されます

"." は改行
を除く任意の文字に一致します

「d」は任意の数字と一致します

「w」は任意の英字または数字と一致します

「s」はスペースと一致します

「^」文字列はパターンで始まる必要があります

「$」文字列はパターンで終わる必要があります

メタキャラクターはリテラル文字を表すだけでなく、正規表現

の構築に使用される記号でもあります。

例: ここには 3 人の文字があります

"A"、"7"、"%"

/w/ は「A」、「7」に一致します

/^d/ は「7」と一致します

/d/ は「7」と一致します

/./ は「A」、「7」、「%」に一致します

しかし、複数の文字を含む文字列はどうなるでしょうか?

「2nite」、「007」、「catch22」、

/^d/ は「2nite」、「007」 (すべて数字で始まる) と一致します

/ddd/ は「007」 (1 行に 3 つの数字) と一致します

/^cat/ は「catch22」 (猫の文字で始まる) と一致します

/dd$/ は「catch22」に一致します (2 つの数字で終わる必要があります)

例: 米国の郵便番号に一致する、郵便番号形式は #####-####

/^ddddd-dddd$/

修飾子を使用して文字の出現数を指定します

修飾子は、サブパターンが正規表現に現れる回数を制御するために使用されます

修飾子の前にサブパターンが続きます。修飾子はサブパターンに適用され、パターン内でサブパターンが出現する回数を制御します。

「*」修飾子の前のサブパターンは 0 回以上出現する必要があります

「+」修飾子の前のサブパターンは 1 回以上出現する必要があります

「?」修飾子の前のサブパターンは 0 回または 1 回出現する必要があります

「{n}」修飾子の前のサブパターンは正確に N 回出現する必要があります

「()」はサブパターンとなる文字またはメタキャラクターを集めます

郵便番号も例として使用します

/^d{5}-d{4}$/

修飾子を使用した式は、メタキャラクターのみを使用した式よりも正確であることがわかります。

/w*/ は、空の文字列
を含む任意の英数字と一致します。

/.+/ 複数回出現する文字列と一致します (空でない文字列と一致するために使用されます)

/(ホット)??ドーナツ/ホットまたはドーナツと一致します

*正規表現で特別な意味を持つ文字に一致させたい場合は、バックスラッシュを使用できます

たとえば、$:$* と一致します

正規表現を使用してデータを検証する

JavaScript の正規表現は、RegExp オブジェクトによって表されます。このオブジェクトには、正規表現を使用してデータを検証するための鍵となる test() メソッドが含まれており、指定されたパターンが文字列

に存在するかどうかを確認します。

例:

コードをコピーします コードは次のとおりです:

var regex=/^d{5}$/;//5 桁の郵便番号に一致する正規表現

正規表現オブジェクト リテラルは RegExp オブジェクトを自動的に構築します

if(!regex.test(inputFiled.value)) 
{ 
//在正则表达式上调用text方法 
//如果符合合正则表达式的要求,返回true 
//如果不符合正则表达式的要求,返回false 
}

コード例

次に、文字列形式の検証に特に使用されるメソッドを作成します

//regex正则表达式
//inputStr需要验证的字符串
//helpText提供信息提示的一个span标签
//helpMessage提示信息内容
//
function validateRegExp(regex,inputStr,helpText,helpMessage)
{
if(!regex.test(inputStr))
{
if(helpText!=null)
helpText.innerHTML=helpMessage;
return false;
}
else{
if(helpText!=null)
helpText.innerHTML="";
}
return true;
}
function validateDate(inputFild,helpText)
{
if(!validateNonEmpty(inputFild,helpText)//先检查参数是非空的
{
return false;
}
return validateRegExp(/^\d{2}\/\d{2}\/\d{4}$/,inputFild,helpText,"请输入正确的日期格式");//调用正则验证方法
}

さて、この記事はここで終わります。スクリプト ハウス Web サイトをサポートしていただきありがとうございます。