Forms_JavaScript スキルを検出するためのカプセル化された汎用メソッド

フォームを空にすることはできない (.notnull) ことの検証を検出します

機能: 送信する必要がある一対の form タグの下に複数 (1 つを含む) のフォームがある場合、js を使用して現在のボタンとそれらの要素を正確に判断します

使用法: form タグの下で現在のフォームのコンテナを見つけて、それに class="form" を指定します。現在のフォームの送信ボタンには class="check"
が指定されます。 空であることを確認する必要がある要素には class="notnull" nullmsg="xx を空にすることはできません!" というプロンプトが与えられ、論理的な判断が必要なフォームには class="need"
が与えられます。 判定タイプは class="num" (数字のみ可能) 検証プロンプトロジックmsg="XX は数字のみ可能"

が与えられます。

エラー メッセージ ブロックを表示するには class="errorMessage" を指定します
エラーメッセージを表示するには class="warn" を指定します
js オブジェクト指向プログラミングを使用しない
論理的な判断。必要な識別子を渡さず、正規表現属性 (カスタム) regex="/^d$/" を直接与えて判断します

外部実装
Global.submitCallback ボタンのコールバック関数
Global.confirmCallback 確認コールバック関数;
改善の余地がある領域:
なし

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

///
*/
//$(ドキュメント).ready(
// 関数 () {
// $("form").find(".notnull").bind({
// focus: function () {
// if ($(this).attr("value") == this.defaultValue) {
// $(this).attr("value", "");
// }
// },
// ブラー: function () {
// if ($(this).attr("value") == "") {
// $(this).attr("value", this.defaultValue);
// }
// }
// });
// }
//);
///*ユニバーサル検出フォームをカプセル化するメソッド*/
///event.srcElement: イベントをトリガーするターゲット オブジェクト。onclick イベントによく使用されます。
///event.fromElement: イベントをトリガーするオブジェクト ソース。onmouseout および onmouseover イベントによく使用されます。
///event.toElement: イベントがトリガーされた後にマウスが移動するターゲット ソースは、onmouseout イベントと onmouseover イベントでよく使用されます。
関数 Global() {
var _self = this;
}
Global.submitCallback = null;
Global.confirmCallback = null;
$(document).ready(function () {
//ボディを形成する
$("body").find(".form").each(function () {
This.onclick = 関数 (e) {
var button = null;
{
をお試しください ボタン = e.srcElement == null document.activeElement : e.srcElement;
} catch (e) {
console.log(e.message)
ボタン = document.activeElement;
}
If ($(button).is(".check")) {
//alert("送信")
var sub = (checkform(this) && CheckInputRex(this) && checkselect(this) && checkChecked(this));
if (サブ) {
// コールバックを呼び出しますが、独自のインスタンスをコンテキストとして使用します
Global.submitCallback.call(this, [e]);
}
return sub;
} else if ($(button).is(".confirm")) {
//alert("削除")
var sub =confirm($(button).attr("title"));
if (サブ) {
Global.confirmCallback.call(this, [e]);
}
return sub;
} else {
                                                                                                                                                                                                                           ​  return true;
}
}
});
/*フォーム内で空にできない要素を検出します*/
関数 checkform(フォーム) {
var b = true;
$(form).find(".notnull").each(function () {
If ($.trim($(this).val()).length を通して // // //alert($(this).attr("msg"))
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
return b = false;
}
});
If (b == true) {
$(form).find(".warn").text("");
$(form).find(".errorMessage").hide();
}
return b;
}
/*検出フォームの必須ドロップダウン リスト*/
関数 checkselect(form) {
var b = true;
$(form).find(".select").each(function (i) {
var ck = $(this).find('option:selected').text();
If (ck.indexOf("select") > -1) {
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
return b = false;
}
});
return b;
}
/*検出フォームの必須チェックボックスをオンにします*/
関数 checkChecked(フォーム) {
var b = true;
$(form).find(".checkbox").each(function (i) {
var ck = $(this)[0].checked;
if (!ck) {
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
return b = false;
}
});
return b;
}
//正規表現と一致するかどうかを確認します
関数 GetFlase(value, reg, ele) {
If (reg.test(value)) {
true を返します;
}
$(ele).parents(".form").find(".warn").text($(ele).attr("logicmsg"));
$(ele).parents(".form").find(".errorMessage").show();
$(ele).focus();
$(ele).select();
return false //
を送信できません。 }
関数 CheckInputRex(フォーム) {
var b = true;
$(form).find("input[type='text']").each(function () {
If (typeof ($(this).attr("regex")) == 'string') {
If ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
// 現在のフォームの値
var value = $(this).attr("value") || $(this).val();
var regx = eval($(this).attr("regex"));
return b = GetFlase(value, regx, this);
}
}
});
return b;
}
///ユーザーが入力した対応する文字が有効かどうかを確認します
///このメソッドは廃止されました
関数 CheckInput(フォーム) {
var b = true;
$(form).find(".need").each(function () {
If ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
// 現在のフォームの値
var value = $(this).attr("value");
// id の値または name 属性の値は次のようになります: [name="contact"]
var name = $(this).attr("class");
// 入力する内容が合法かどうかを確認します。たとえば、連絡先情報
var len = name.split(" ");
for (var i = 0; i switch ($.trim(len[i])) {
                                                                                                                                                                                                                                                                                                 ケース「モバイル」:
var reg = /^1d {10} $ /;
戻り値 b = GetFlase(value, reg, this);
休憩;
                                                                                                                                                                                                                                             ケース「メール」:
var reg = /^[w-] (.[w-] )*@[w-] (.[w-] ) $/;
戻り値 b = GetFlase(value, reg, this);
休憩;
///2 つのパスワードは一致していますか? ケース「パスワード」:
休憩;
ケース「パスワード2」:
If ($("#password").attr("value") != $("#password2").attr("value")) {
                                                                            $(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));
$(this).parents(".form").find(".errorMessage").show();
                                                                                                                                                                                                                                                    } 休憩;
ケース「ワークテル」:
case "hometel": //自宅の電​​話番号
var reg = /^d {8} $ /;
戻り値 b = GetFlase(value, reg, this);
休憩;
case "post": //郵便番号
var reg = /^d{6}$/;
戻り値 b = GetFlase(value, reg, this);
休憩;
ケース「ボーナス」:
ケース「許可」:
ケース「固定給与」:
var reg = /^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0 |0|[1-9]d)$/;
戻り値 b = GetFlase(value, reg, this);
休憩;
ケース「アイデンティティ」:
var reg = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/;
戻り値 b = GetFlase(value, reg, this);
                            休憩;
                        ケース「高さ」:
                            var reg = /^[1-2][0-9][0-9]$/;
                            return b = GetFlase(value, reg, this);
                            休憩;
                        ケース "qq":
                            var reg = /^[1-9][0-9]{4,}$/;
                            return b = GetFlase(value, reg, this);
                            休憩;
                        ケース「開始時間」:
                        ケース「終了時間」:
                            var reg = /^d{4}$/;
                            if (reg.test(value) && (parseInt($(".endtime").val()) > parseInt($(".begintime").val())) {
                                b を返します;
                            }
                            $.ligerDialog.alert($(this).attr("msg"))
                            $(this).select(); //获取焦点
                            b = falseを返します。 // 提交できません
                            休憩;
                        ケース "番号":
                            var reg = /^d $/;
                            return b = GetFlase(value, reg, this);
                            休憩;
                        ///大陆去香港必要办理往来港澳通行证および香港的签注.因私普通护照号番号格式有:
///14/15 7 桁、G 8 桁; ///一般的なものは次のとおりです: P. 7 桁。 ///公式目的: S. 7 桁または //S D で始まる 8 桁は外交パスポートです case "postport": //パスポート番号
var reg = /^(Pd{7}|Gd{8}|Sd{7,8}|Dd |1[4,5]d{7})$/;
戻り値 b = GetFlase(value, reg, this);
休憩;
ケース「銀行口座」:
var reg = /^[0-9]{19}$/;
戻り値 b = GetFlase(value, reg, this);
休憩;
} //スイッチ
//
}
});
return b;
}
///このメソッドは非推奨になりました
});
///クリックして背景色を変更します
$(document).ready(function () {
var inputs = $("#top>.c>input");
$(inputs).each(function () {
This.onclick = function () {
document.getElementById("main").style.backgroundColor = this.name;
//$("#main").backgroundColor = this.name;
}
});
});



上記のコードは、カプセル化された汎用フォーム検出メソッドです。気に入っていただければ幸いです
。