HTMLは正規表現を使用してテーブルの例をテストします

HTMLは正規表現を使用してテーブルの例をテストします

以下は、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 を使用して、円の動的な光る特殊効果アニメーションを実装するためのサンプル コード

推薦する

リモート接続を許可するようにMySQLを変更する方法

MySQLリモート接続の問題に関しては、会社で働いているときに誰かのコンピュータに保存されているMy...

入力が完了したことを検出し、次のコンテンツを自動的に入力する HTML を実装する方法

前回の記事では、入力完了の簡単な検出を実現しましたが、今回はさらに一歩進んで、入力が完了した後に次の...

HTML における DOM 要素のスクロールバースクロール制御の詳細な説明

dom要素に新しい子要素を追加し、新しく追加された新しい要素がコンテナーのスコープを超えた場合は、次...

MySQLデータベース移行におけるデータ文字化けの問題を解決する

リーダーの指示のもと、Java プロジェクトを引き継ぎ、リファクタリングを行う必要がありました。同時...

Pure CSS3はdivの出入りを順番に実現します

この記事は主に、純粋な CSS3 を使用して div が順番に出入りする効果を紹介します。一定の参考...

訪問者を惹きつけるウェブサイトコンテンツを作成する14の方法

ネットサーフィンをしていると、私の注意を引こうとする美しいグラフィックでいっぱいの Web サイトを...

js を使ってシンプルな虫眼鏡効果を実現

この記事の例では、参考までに簡単な虫眼鏡効果を実現するためのjsの具体的なコードを共有しています。具...

TypeScriptジェネリックの使用

目次1. 使いやすい2. 関数内でジェネリックを使用する3. クラス内でジェネリックを使用する4. ...

Linux環境にJDK1.8をインストールする

目次1. インストール環境2. インストール手順ステップ1: インストールパッケージをダウンロードす...

JavaScriptの記事では、Webフォームの操作方法を説明します。

1. はじめに先ほど、ウェブページの急速な発展について紹介しました。今回は、より深い内容についてお...

React双方向データバインディングの原理についての簡単な説明

目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...

Linux で Hadoop クラスターをインストールするための詳細な手順

目次1. usrディレクトリにHadoopディレクトリを作成し、インストールパッケージをそのディレク...

mysql maxとwhere間の実行問題の概要

mysql maxとwhereの間の実行の問題SQLを実行します: テーブル「grades」を作成し...

組み込み Linux で QT アプリケーションを再起動する簡単な方法 (QT4.8 qws ベース)

アプリケーション ソフトウェアには通常、次のようなビジネス要件があります。新しいバージョンの APP...

JS は VUE コンポーネントに基づいて都市リスト効果を実装します

この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを...