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

Jquery_jquery に基づくタグインテリジェント検証実装コード

May 16, 2016 pm 06:13 PM

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 = ""; SpanOk = "
/**パラメータ設定終了 ** /
/* *主要 **/
//ファイル ディレクトリ、最上位ディレクトリを返します。/
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 までご連絡ください。

ホット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ヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

See all articles