ホームページ > ウェブフロントエンド > フロントエンドQ&A > jqueryを使用して日付形式を検証する方法

jqueryを使用して日付形式を検証する方法

PHPz
リリース: 2023-04-17 13:36:42
オリジナル
1475 人が閲覧しました

フロントエンド開発では、日付形式を検証する必要がある場面がよくありますが、jquery は非常に便利で使いやすいツール ライブラリです。これを使用すると、日付形式の検証を簡単に完了できます。この記事では、jquery を使用して日付を確認する方法を紹介します。

1. jquery ライブラリの紹介
jquery を使用して日付形式を検証する前に、まず jquery ライブラリを導入する必要があります。ローカル jquery ライブラリを導入するか、CDN を通じて導入できます:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
ログイン後にコピー

2 、正規表現を使用して日付形式を検証する
正規表現を使用して日付形式を検証できます。jquery には、スペースを削除できる正規表現検証メソッド $.trim() が用意されています。文字列内に改行文字などの無効な文字が含まれています。次の正規表現を使用できます。

var reg = /^(\d{4})-(\d{2})-(\d{2})$/;
ログイン後にコピー

上記の正規表現は、「2021-05-01」の形式で日付形式を検証できます。ここで、\d は数値、## を表します。 #{n } は n 回連続することを意味し、^ は文字列の先頭と一致することを意味し、$ は文字列の末尾と一致することを意味し、()グループ化を意味します。 次のコードを使用して、正規表現を使用して日付形式を検証できます:

var date = $('#date').val();
if ($.trim(date).match(reg) == null) {
    alert("日期格式不正确,请重新输入");
}
ログイン後にコピー
上記のコードでは、

#date は検証する日付入力ボックスを表します。 val() メソッドは入力ボックスの値を取得でき、$.trim() メソッドはスペースや改行などの無効な文字を削除し、match() メソッドはメソッドは文字列を正規表現と照合するために使用されます。式は照合され、戻り値が null の場合は、日付形式が正しくないことを意味します。 3. moment.js プラグインを使用して日付形式を検証する

日付形式の正規表現検証に加えて、moment.js プラグインを使用して日付を検証することもできますこれは、さまざまな日付形式を便利に処理できる、非常に強力な日付処理ツールです。

moment.js を使用して、次のように日付形式コードを確認します。

var date = $('#date').val();
if (!moment(date).isValid()) {
    alert("日期格式不正确,请重新输入");
}
ログイン後にコピー

上記のコードでは、moment() メソッドは入力日付文字列を moment オブジェクトに変換し、isValid() メソッドは日付が有効かどうかを確認するために使用されます。日付が不正な場合は false を返します。

4. 結論

この記事では、jquery が日付形式を検証する方法として、正規表現を使用する方法と moment.js プラグインを使用する方法の 2 つを紹介します。どちらの方法を使用する場合でも、最初に jquery ライブラリまたは moment.js プラグインを導入する必要があります。正規表現検証方法はより簡単ですが、特定の制限があります。これは特定の形式の日付にのみ適していますが、moment は特定の形式の日付にのみ適しています。 .js プラグインはより多くの日付形式を処理できます。多くの日付形式が存在しますが、多くのコードが導入されており、これもページのパフォーマンスに一定の影響を与えます。実際の状況に応じてどの方法を使用するかを選択できます。

以上がjqueryを使用して日付形式を検証する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート