フラグメント構成の検証
フラグメント 構成オプションを定義するときに、有効なエントリのルールを決定する テキスト タイプのフィールドに 検証 プロパティを追加できます。 ルールのタイプ(text、number、email、url、または pattern)を指定することで、各フィールドが受け入れるデータのタイプを決定します。 また、カスタムのエラーメッセージを追加して、無効なエントリーをユーザーに通知することもできます。
この記事で説明する検証は、フラグメント構成フィールドを検証するためのもので、ページ エディター ビューの設定パネルでのみ適用されます。 ユーザー入力を検証するには、 オブジェクト検証 または JavaScript 検証を備えたフォーム フラグメントを使用します。
テキスト検証ルール
次のJSONコードは、 textタイプフィールドの有効なエントリー(つまりminLengthおよびmaxLength)で使用される最小および最大文字数を設定するtext検証ルールを追加します。
{
"fieldSets": [
{
"fields": [
{
"label": "validate text length",
"name": "text1",
"type": "text",
"typeOptions": {
"validation": {
"errorMessage": "Enter a minimum of 10 characters. Entries cannot exceed 30 characters.",
"type": "text",
"minLength": 10,
"maxLength": 30
}
}
}
]
}
]
}

数値検証ルール
次のJSONコードは、 textタイプフィールドの有効なエントリーの数値範囲(つまりminおよびmax)を定義するnumber検証ルールを追加します。
{
"fieldSets": [
{
"fields": [
{
"dataType": "int",
"label": "validate number",
"name": "text2",
"type": "text",
"typeOptions": {
"validation": {
"errorMessage": "Enter a number between 5 and 10.",
"type": "number",
"min": 5,
"max": 10
}
}
}
]
}
]
}

メール検証ルール
次のJSONコードは、メール構文を要求し、textタイプフィールドの有効なエントリーの文字長(つまりminLengthおよびmaxLength)を定義するemail検証ルールを追加します。
{
"fieldSets": [
{
"fields": [
{
"label": "validate email",
"name": "text3",
"type": "text",
"typeOptions": {
"validation": {
"errorMessage": "Enter a valid email address.",
"type": "email",
"minLength": 1,
"maxLength": 30
}
}
}
]
}
]
}

URL検証ルール
次のJSONコードは、適切なURLプロトコルを要求し、textタイプフィールドの有効なURLの文字長(つまりminLengthおよびmaxLength)を定義するurl検証ルールを追加します。
{
"fieldSets": [
{
"fields": [
{
"label": "validate url",
"name": "text4",
"type": "text",
"typeOptions": {
"validation": {
"errorMessage": "Enter a valid URL.",
"type": "url",
"minLength": 1,
"maxLength": 100
}
}
}
]
}
]
}

パターン検証ルール
次のJSONコードは、正規表現を使用してpattern検証ルールをtextタイプフィールドに追加して、有効なエントリーを定義します。
正規表現の値でバックスラッシュを使用して文字をエスケープする場合 (例: \d)、最初にバックスラッシュをエスケープするために JSON ファイル内で 2 つのバックスラッシュを使用する必要があります (例: \\d)。 JSON 文法の詳細については、 IETF ドキュメントを参照してください。
{
"fieldSets": [
{
"fields": [
{
"label": "validate pattern",
"name": "text5",
"type": "text",
"typeOptions": {
"validation": {
"errorMessage": "Enter a valid 10 digit phone number.",
"type": "pattern",
"regexp": "([0-9]{3})[.\\-]?([0-9]{3})[.\\-]?([0-9]{4})"
}
}
}
]
}
]
}
