検索
ホームページウェブフロントエンドjsチュートリアルJquery_jquery に基づくタグインテリジェント検証実装コード

Jquery について学習した後、Jquery の強力な機能により、補助コードが多すぎて保守が難しいという問題が解決されました。
AutoValidate.JS

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

///
//検証メソッド v1.0、2010 年 12 月に作成- 9 完了 2010-12-16 MR. /Support type=text type=checkbox type=radio select タグ検証
//vld="***"形式検証が必要です
//vld="n*** "オプションの形式の検証
//err="***"エラー表示内容
//super="y"プロンプト情報を追加するには を使用します。y 以外の文字を使用する場合は、同じレベルの検証グループと同じレベルのグループのラベルを変更する必要があります。最初のタグには super="y" 属性を付けることができ、他のタグには
//len= を付ける必要はありません。 ***" テキストエリア タグに使用される長さ制限
//
$(function () {
/ /通常の匿名オブジェクト
var strRegex = {};
//エラー情報匿名オブジェクト
var strError = {};
//正しい情報の匿名オブジェクト
var strRight = {};
/**パラメータ設定開始 **/
//空ではありません
strRegex.NoNull = /[^s] /;
strError.NoNull = "123、中国などの内容を入力してください。";
//Email
strRegex.Email = /^([a-zA -Z0-9_-]) @([a-zA-Z0-9_-]) ((.[a-zA-Z0- 9_-]{2,3}){1,2})$/; >strError.Email = "china@163.com などの電子メール形式を確認してください。
//Website
strRegex .Url = /^http://[A-Za-z0-9] .[A-Za-z0-9] [/=?%-&_~`@[]': !]*([^"" ])*$/;
strError.Url = "URL を確認してくださいhttp://www.jb51.net!" などの形式;
//Account
strRegex.An = /^([a -zA-Z0-9]|[_]){6,16 }$/;
strError.An = "china_56 などのアカウント形式を確認してください。 ";
//Number
strRegex.Math = /d $/;
strError.Math = "1234 などの数値形式を確認してください。 ";
//年齢
strRegex.Age = /^d{2}$/;
strError.Age = "10 歳から 99 歳までの年齢形式を確認してください。 ";
//郵便番号
strRegex.Post = /^[1-9]d{5}$/;
strError.Post = "150001 などの郵便番号形式を確認してください。 ";
//Phone
strRegex.Phone = /^((d{11})|((d{7,8})|(d{4}|d{3})-(d{ 7,8})|(d{4}|d{3})-(d{7,8})-(d{4}|d{3}|d{2}|d{1})|( d{7,8})-(d{4}|d{3}|d{2}|d{1})))$/;
strError.Phone = "電話番号の形式を確認してください。 15546503251! ";
//ID カード
strRegex.Card = /^(([1-9]d{5}[1-9]d{3}((0d)|(1[0-2] ))(([0|1|2]d)|3[0-1])((d{4})|d{3}[X,x]))|([1-9]d{5 }[1-9]d{1}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])(d{3})) )$/;
strError.Card = "230103190001010000 などの ID カードの形式を確認してください。 ";
//Money
strRegex.Price = /^([1-9]d*|0)(.d )?$/;
strError.Price = "お金の形式を確認してください。 99.98など! ";
//Date
strRegex.Date = /((^((1[8-9]d{2})|([2-9]d{3}))([-/. _])(10|12|0?[13578])([-/._])(3[01]|[12][0-9]|0?[1-9])$)|(^ ((1[8-9]d{2})|([2-9]d{3}))([-/._])(11|0?[469])([-/._] )(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]d{2})|([2-9]d{3} ))([-/._])(0?2)([-/._])(2[0-8]|1[0-9]|0?[1-9])$)|( ^([2468][048]00)([-/._])(0?2)([-/._])(29)$)|(^([3579][26]00)([ -/._])(0?2)([-/._])(29)$)|(^([1][89][0][48])([-/._])( 0?2)([-/._])(29)$)|(^([2-9][0-9][0][48])([-/._])(0?2 )([-/._])(29)$)|(^([1][89][2468][048])([-/._])(0?2)([-/._ ])(29)$)|(^([2-9][0-9][2468][048])([-/._])(0?2)([-/._])( 29)$)|(^([1][89][13579][26])([-/._])(0?2)([-/._])(29)$)|(^ ([2-9][0-9][13579][26])([-/._])(0?2)([-/._])(29)$))/; strError.Date = "1999.9.9、1999-9-9、1999.09.09 などの日付形式を確認してください。 ";
//Time
strRegex.Time = /^([0-9]|[0-1][0-9]|[2][0-3])(:|:)( [0-5][0-9])$/;
strError.Time = "23:59 などの時刻形式を確認してください。 ";
strError.Length = "入力情報の長さを確認してください。長さが以下です";
strRight.Info = "形式は正しいです。"; //空に設定できます
//ドロップダウン ボックス
strRegex.DDL = "選択してください";
strError.DDL = "オプションを選択してください";
//単一checkbox
strRegex.Check = "選択してください";
strError.Check = "オプションを選択してください";
//単一ラジオ チェック ボックス
strRegex.Radio = "選択してください"; > strError.Radio = "オプションを選択してください";
//同じレベルのチェックボックスのグループ
strRegex.CheckGroup = "オプションを選択してください"; ;
//同じレベルのラジオ チェック ボックスのグループ
strRegex.RadioGroup = "選択してください";
strError.RadioGroup = "オプションを選択してください"; label
var SpanError = "Jquery_jquery に基づくタグインテリジェント検証実装コード"; SpanOk = "Jquery_jquery に基づくタグインテリジェント検証実装コード
/**パラメータ設定終了 ** /
/* *主要 **/
//ファイル ディレクトリ、最上位ディレクトリを返します。/
function FilePath() {
var file = ""
var; path = window.location.pathname.split('/');
$(path).each(function () {
file = "../" ファイル;
return file;
}
//ページ検証セルフテスト
$("#form1 [vld]").blur(function () {
RegexGether($(this));
});
// 検証処理 set
function RegexGether($ctrl) {
switch ($ctrl.attr("vld")) {
case "nonnull":
RegexNull ($ctrl);
case "年齢":
RegexInputTextAll($ctrl, strRegex.Age, strError.Age); >RegexInputTextOnly($ctrl, strRegex.Age) , strError.Age);
break;
case "date":
RegexInputTextAll($ctrl, strRegex.Date, strError.Date); ;
case "ndate":
RegexInputTextOnly($ctrl, strRegex.Date, strError.Date);
case "price":
RegexInputTextAll($ctrl, strRegex.Price) , strError.Price);
ケース "nprice":
RegexInputTextOnly($ctrl, strRegex.Price, strError.Price); 🎜>RegexInputTextAll($ctrl, strRegex.Email) , strError.Email);
break;
case "nemail":
RegexInputTextOnly($ctrl, strRegex.Email, strError.Email);ブレーク;
ケース "post":
RegexInputTextAll($ctrl, strRegex.Post, strError.Post);
ブレーク;
ケース "npost":
RegexInputTextOnly($ctrl, strRegex. Post, strError.Post);
break ;
case "card":
RegexInputTextAll($ctrl, strRegex.Card, strError.Card);
RegexInputTextOnly($ctrl, strRegex.Card) , strError.Card);
break;
case "time":
RegexInputTextAll($ctrl, strRegex.Time, strError.Time); >break;
case "ntime":
RegexInputTextOnly($ctrl, strRegex.Time, strError.Time);
case "math":
RegexInputTextAll($ctrl, strRegex) .Math, strError.Math);
break ;
case "nmath":
RegexInputTextOnly($ctrl, strRegex.Math, strError.Math); :
RegexInputTextAll($ctrl, strRegex.Url , strError.Url);
break;
case "nurl":
RegexInputTextOnly($ctrl, strRegex.Url, strError.Url); >break;
case "an":
RegexInputTextAll($ctrl, strRegex.An, strError.An);
break;
case "nan":
RegexInputTextOnly($ctrl, strRegex) .An, strError.An);
break ;
case "電話":
RegexInputTextAll($ctrl, strRegex.Phone, strError.Phone); :
RegexInputTextOnly($ctrl, strRegex.Phone) 、 strError.Phone);
case "ddl":
RegexSelect($ctrl)
case; "チェック":
RegexInputCheckBoxRadioOnly($ctrl, strError .Check);
ケース "ラジオ":
RegexInputCheckBoxRadioOnly($ctrl, strError.Check); >case "checkgroup":
RegexInputCheckBoxRadioAll($ctrl , strError.CheckGroup);
case "radiogroup":
RegexInputCheckBoxRadioAll($ctrl, strError.RadioGroup);
}
}
// タグコンテンツの null 検証
function RegexNull($ctrl) {
if (strRegex.NoNull.test($ctrl.val())) {
return RegexLen($ctrl);
}
else {
Error($ctrl, strError.NoNull);
return false;
}
}
//ピアと一連の input (type=radio) タグまたは input(type=checkbox) タグ
function RegexInputCheckBoxRadioAll($ctrl, error) {
if ($ctrl.parent().children(":checked") ).length == 0) {
if ( $ctrl.parent().children().attr("super")) {
//複数の [super='y'] が存在する可能性があります同じレベルのタグ、1 つだけを取得して return false コントロールを使用、一度実行してループから抜け出す
$ctrl.parent().children("[super='y']").each(function () {
Error($(this), error );
return
});
}
//同じレベルのタグのグループが一緒にエラー
$ctrl.parent().children("[type ='" $ctrl.attr("type") "']").each(function () {
Error($(this) 、エラー);
}
return false;
}
if ($ctrl.parent().children().attr(" )) {
$ctrl.parent().children("[ super='y']").each(function () {
Ok($(this));
return false;
});
}
else {
$ctrl.parent().children().each(function () {
Ok($(this));
}) ;
}
true を返します
}
}
//単一の input(type=radio) タグまたは input(type=checkbox) タグを検証します
function RegexInputCheckBoxRadioOnly($ctrl, error) {
if (!$ctrl.attr("checked") ) {
エラー($ctrl, エラー);
戻り値
}
else {
OK($ctrl);
}
//タグの選択、オプションの検証
function RegexSelect($ctrl) {
if ($ctrl.val() == strRegex.DDL) {
Error($ctrl, strError.DDL) ) ;
return false;
}
else {
Ok($ctrl)
return true;
}
// タグは空のコンテンツ形式を許可します検証、type=text ラベル検証
function RegexInputTextOnly($ctrl, Regex, error) {
//最初にラベルが空かどうかを検証します
if (strRegex.NoNull.test($ctrl.val() ) ) {
return RegexOtherFormat($ctrl, Regex, error);
}
else {
Ok($ctrl);
return
}
}
//ラベルを空にすることはできません コンテンツ形式検証、type=text ラベル検証
function RegexInputTextAll($ctrl, Regex, error) {
//最初にラベルが空かどうかを検証します
if (strRegex.NoNull .test($ctrl.val())) {
return RegexOtherFormat($ctrl, Regex, error);
}
else {
Error($ctrl, error) ;
return false;
}
}
//タグコンテンツ形式検証
function RegexOtherFormat($ctrl, Regex, error) {
if (Regex.test($ctrl. val())) {
return RegexLen($ctrl);
else {
Error($ctrl, error);
}
//テキストエリアのタグ長検証
function RegexLen($ctrl) {
//タグに len 属性があるかどうか
if ($ctrl.attr("len")) {
var error = strError.Length $ctrl.attr("len") "単語! ";
if (parseInt($ctrl.val().length) > parseInt($ctrl.attr("len"))) {
Error($ctrl, error);
return false ;
}
}
Ok($ctrl);
return true;
}
//フォーマット検証エラー表示
function Error($ctrl, error) {
//タグ内にerr属性があるので、属性内容に従ってタイトルを記入
if ($ctrl.attr("err")) {
error = $ctrl.attr("err ");
}
if ($ctrl.attr("super")) {
//スーパー属性タグでスパンを追加
$ctrl.parent().find("span") .remove();
$ctrl.parent().append(SpanError);
$ctrl.parent().find("span").append(error); ).find("span").fadeTo("slow", 0.66);
}
else {
//タイトル属性に追加
$ctrl.attr("title", error );
$ctrl.addClass("error");
}
}
//形式検証は正しい、エラー スタイルをクリア
function Ok($ctrl) {
/ /考えられるエラーを削除 スタイル
if ($ctrl.attr("super")) {
$ctrl.parent().find("span").remove();
}
else {
$ctrl.removeClass("error");
}
if ($.trim($ctrl.val()).length > 0) {
var right = strRight.Info ;
// タグにリグ属性があるかどうかを確認します
if ($ctrl.attr("rig")) {
right = $ctrl.attr("rig"); }
//正しいプロンプト情報を追加します
if ($ctrl.attr("super")) {
$ctrl.parent().append(SpanOk); .find("スパン") .append(right);
$ctrl.parent().find("スパン").fadeTo("遅い",0.99).fadeTo("遅い",0.99).fadeTo( "slow",0);
}
else {
$ctrl.attr("title", right)
}
}
}
// 自己送信-test
$(" #vldBtn").click(function () {
$("#form1 [vld]").each(function () {
RegexGether($(this));
});
//タグ内のスタイルに誤りがあるかどうかを確認します
if ($("#form1 [vld][class='error']").length > 0 ) {
return false;
}
else {
return true;
}
}); htm




コードをコピー


コードは次のとおりです:
















  • 姓名:





  • 年龄:





  • 日期:





  • 金钱:





  • 邮箱:





  • 邮编:





  • 电话:





  • 身份证:





  • 时间:





  • 数字:





  • 网址:





  • 账号:





  • 文本长度限制:





  • 下拉框:





  • 方形复选框:





  • 圆形复选框:





  • 方形复选框:





  • 圆形复选框:











声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解:それが何をするのか、なぜそれが重要なのかjavascriptの分解:それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか?pythonまたはjavascriptの方がいいですか?Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)