以下は、HTML で正規表現を使用してテーブルをチェックするサンプル コードです。具体的なコードの内容は次のとおりです。 <span style="font-size:24px;color:#cc6600;"> 正規表現は、JavaScript スクリプトの文法規則をチェックするのに非常に便利な方法です。しかし、これは Java の正規表現とは異なります。正規表現ルールでは、「^」で始まり、「$」で終わる必要があります。 </span> <span style="font-size:24px;color:#cc6600;">例を見てみましょう。 </span> <span style="font-size:18px;"><!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル> フォームテーブルtr td{ 境界線: 1px 実線のライトグレー; テキスト配置: 中央; } フォーム テーブル tr td 入力{ 幅: 97%; } </スタイル> <スクリプト言語="JavaScript" タイプ="text/javascript"> //判定ルール(正規表現) 関数goto() { var name = document.getElementById("name"); var pwd = document.getElementById("pwd"); var pwd2 = document.getElementById("pwd2"); var pnum = document.getElementById("pnum"); var 電話 = document.getElementById("電話"); var 電話 = document.getElementById("電話"); var email = document.getElementById("email"); (名前.値.トリム().長さ<=8)の場合{ alert("ユーザー名の長さは8文字より長くなければなりません"); 名前.フォーカス() 名前.値=""; 戻る; } // ルールには大文字と小文字、数字を含める必要があります var regex = /^(?!(?:\d+|[a-zA-Z]+|[\da-z]+|[\dA-Z])$)[\da-zA-Z]{6,}$/; // var regex = /^[A-z0-9]{10,20}$/; if ( !pwd.value.match(regex)){ alert("パスワードが要件を満たしていません"); pwd.focus() pwd.value=""; 戻る; } (pwd.value != pwd2.value)の場合{ alert("2回入力したパスワードが異なります"); pwd2.フォーカス() pwd.value=""; pwd2.value=""; 戻る; } var 地域 = /^\d{17}X$|^\d{15}$/; if (!reg.test(pnum.value)){ alert("ID カードが要件を満たしていません"); pnum.フォーカス() pnum.value=""; 戻る; } var regex2 = /^\d{4}-\d{7}$/; //固定電話番号を判断するif (!regex2.test(phone.value)){ alert("固定電話番号は規制に準拠していません"); 電話.フォーカス() 電話.値=""; 戻る; } var regex3 = /^1[3,5,7,8]\d{9}$/; if (!regex3.test(電話.値)){ alert("携帯電話番号が要件を満たしていません"); 電話.フォーカス() 電話.値=""; 戻る; } // テストメソッドはバックスラッシュでエスケープする必要があります var regex4 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; if (!regex4.test(email.value)){ alert("メールボックスは規制に準拠していません"); 電子メール.フォーカス() email.value=""; 戻る; } } </スクリプト> </head> <本文> <フォーム> <table style="width:600px;height: 300px;border: 1px solid lightgrey"> <tr> <td width="18%">ログイン名:</td> <td><入力id="名前"タイプ="テキスト"></td> <td width="50%">長さが 8 文字を超えています</td> </tr> <tr> <td>ログインパスワード:</td> <td><input id="pwd"type="パスワード"></td> <td>長さが 10 文字を超えており、文字と数字が含まれています</td> </テキストエリア></td> </tr> <tr> <td>パスワードの確認:</td> <td><input id="pwd2" type="パスワード"></td> </tr> <tr> <td>ID番号:</td> <td><input id="pnum" type="text"></td> <td>15 桁目または 18 桁目の最後の桁は X です</td> </tr> <tr> <td>固定電話:</td> <td><input id="phone"type="text"></td> <td>フォーマット xxxx-xxxxxxx</td> </tr> <tr> <td>携帯電話番号:</td> <td><input id="電話"type="テキスト"></td> <td>11桁の整数</td> </tr> <tr> <td>メールアドレス:</td> <td><input id="email"type="text"></td> <td>[email protected] [email protected]</td> </tr> <tr> <td>現在の居住地:</td> <td><選択> <option>--都道府県を選択--</option> <option>北京</option> <option>河北</option> <option>広西</option> </選択></td> <td><選択> <option>--都市を選択--</option> <option>煙台</option> <option>青島</option> <option>ハルビン</option> </選択></td> </tr> <tr> <td colspan="1"></td> <td><input id="submit" type="button" value="登録情報を送信" style="width: 100px" onclick="goto()"></td> <td><input type="reset" value="リセット" style="width: 60px"></td> </tr> </テーブル> </フォーム> </本文> </html></span> 付録: よく使われるルール: "^\\d+$" // 非負整数(正の整数 + 0) "^[0-9]*[1-9][0-9]*$" // 正の整数 "^((-\\d+)|(0+))$" // 非正の整数 (負の整数 + 0) "^-[0-9]*[1-9][0-9]*$" // 負の整数 "^-?\\d+$" // 整数 "^\\d+(\\.\\d+)?$" // 非負の浮動小数点数 (正の浮動小数点数 + 0) "^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$" // 正の浮動小数点数 "^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$" // 正でない浮動小数点数 (負の浮動小数点数 + 0) "^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$" // 負の浮動小数点数 "^(-?\\d+)(\\.\\d+)?$" // 浮動小数点数 "^[A-Za-z]+$" // 26文字の英語の文字からなる文字列 "^[AZ]+$" // 26個の大文字の英語の文字で構成される文字列 "^[az]+$" // 26 個の小文字の英語の文字で構成される文字列 "^[A-Za-z0-9]+$" // 数字と26文字の英語の文字で構成される文字列 "^\\w+$" // 数字、26文字の英字、またはアンダースコアで構成される文字列 "^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$" //メールアドレス "^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$" //url 上記は、HTML 内のテーブルをテストするために正規表現を使用するサンプル コードとして紹介したものです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: Spring Boot 階層化パッケージング Docker イメージの実践と分析 (推奨)
>>: 純粋な CSS3 を使用して、円の動的な光る特殊効果アニメーションを実装するためのサンプル コード
目次セットは値が重複しない特別なコレクションです。セットコレクション基本API独自の価値判断セットを...
1. オーバーレイの概要オーバーレイとは、その名の通り、別の形で地図上に表示される、覆うことを指しま...
1. フローティング方式を使用する効果画像: コードは次のとおりです: (.content の高さは...
インストール手順1. Redisをインストールするdocker search redis和docke...
まず、MySQL とは何かを簡単に紹介します。簡単に言えば、データベースはデータを格納するための倉庫...
背景最近、オンライン操作中に DML ステートメントを実行しました。これは絶対確実だと思っていました...
目次1. 仲介業者モデル2. 例1. 見積コンポーネントに購入ボタンを追加する2. 親コンポーネント...
目次序文コアコードコードのファイル表示部分序文この記事では主に、Vue プロジェクトでの添付ファイル...
この記事では、Windows 8 での MySQL5.6 のインストールと設定のチュートリアルを記録...
js データ型基本データ型: 数値、文字列、ブール値、未定義、null、シンボル、参照データ型: オ...
序文現在、プロジェクトでは、Axios ライブラリが HTTP インターフェース リクエストによく使...
MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...
コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。 <表示...
目次MySQL 制約操作1. 非ヌル制約2. ユニーク制約3. 主キー制約4. 外部キー制約5. カ...
目次序文実装のアイデア実装手順1. Nginxをコンパイルする2. 設定ファイルは以下のとおりです要...