ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryフォーム検証プラグイン formValidator(改良版)_jquery

jQueryフォーム検証プラグイン formValidator(改良版)_jquery

WBOY
リリース: 2016-05-16 17:56:45
オリジナル
1279 人が閲覧しました

列挙オブジェクトの使用法:

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

//各種検証メソッド サポートされているタグのタイプ
sustainType: function (elem, settings) {
var srcTag = elem.tagName;
switch (setting.validatetype) {
case _validTypeEnum.InitValidator:
true を返す;
case _validTypeEnum.InputValidator:
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA || srcTag == _validTagEnum.SELECT) {
true を返す;
} else {
return false;
}
case _validTypeEnum.CompareValidator:
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) {
if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) {
return false;
} else {
return true;
}
return false ;
case _validTypeEnum.AjaxValidator:
if (stype == _validTagTypeEnum.text || stype == _validTagTypeEnum.textarea || stype == _validTagTypeEnum.file || stype == _validTagTypeEnum .select_one) {
return true;
} else {
return false;
}
case _validTypeEnum.RegexValidator:
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) {
if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) {
return false
} else {
return true; >}
return false;
case _validTypeEnum.FunctionValidator:
return true;
}
}





コードをコピー
コードは次のとおりです: //指定された文字列の長さを取得しますgetLength: function (jqObj) {
var elem = _GetDomObj( jqObj);
var sType = elem.type;
switch (sType) {
case _validTagTypeEnum.text:
case _validTagTypeEnum.hidden:
case _validTagTypeEnum .password:
case _validTagTypeEnum.textarea:
case _validTagTypeEnum.file:
var val = jqObj.val();
var initConfig = $.formValidator.getInitConfig(elem.settings) [0].validatorgroup);
len = initConfig.wideword(val) : val.length;
case _validTagTypeEnum.radio:
len = $ ("input[type='" sType "'][name='" jqObj.attr("name") "']:checked").length;
break
case _validTagTypeEnum; select_one:
case _validTagTypeEnum.select_multiple:
len = jqObj.children(":selected").length;
break;
}


2. オリジナルのバージョンでは、検証ラベルのオブジェクトではなく、検証ラベルの ID が各メソッド間で渡されるため、各メソッドの ID に基づいて検証ラベルのオブジェクトを取得する必要がなくなりました。メソッドを使用して、コードの実行速度とパフォーマンスを向上させます。
3. オリジナルのバージョンでは、検証成功、エラーなどのプロンプト スタイル名はプラグイン内で制限されています。たとえば、エラー プロンプト スタイル名は次のようになります。このプラグインを使用するときは、プロンプト内の各プロンプト スタイルの名前に注意してください。また、使用すると不快なスタイルの重複や競合を避けるためにも注意してください。本当に優れたプラグインは、js とスタイル (ユーザーが設定する必要がある) を完全に分離する必要があります。これはプログラミングにおける「疎結合」に似ていますが、この方法でのみ、js とスタイルは相互に依存し、より良いものになります。ユーザーのニーズに適応するため、ユーザーがプラグインで各プロンプト スタイルを設定できるようにしました (メソッドのパラメーター オブジェクトの属性として)。メイン コードは次のとおりです。 >

コードをコピー


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

//ヒントスタイル列挙
var _tipCssEnum =
{
//(ajax) 読み込み処理
loadCss: "loadCss",
//フォーカス取得時 Style
focusCss: "focusCss",
//Prompt [空のプロンプトの場合] ---これが設定されていない場合は、errorCss を使用します
noticeCss: "noticeCss",
//失敗またはエラー [形式の場合]エラー、正規表現検証]---
errorCss: "errorCss",
//Success を設定する必要があります---
successCss: "successCss",
//デフォルト状態を設定する必要があります---
defaultCss: "defaultCss"
};
initConfig: function (controlOptions) {
var settings =
{
debug: false,/ / デバッグ モードかどうか
validatorgroup: "1",//検証グループ
alertmessage: false,//検証プロンプトが直接ポップアップするかどうか
validobjectids: "",//検証オブジェクト コレクション
focusvalid: false,
onsuccess: function () { return true; }, //検証が成功した後の処理メソッド、return true|false (フォーム検証を追加したり、フォームの送信を阻止したりできます)
onerror: function () { } ,
filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str) }, //入力文字列をフィルタリングするメソッド [設定可能]
isformpost: false, //フォーム送信かどうか (デフォルト: false) ——非フォーム送信、通常は ajax 送信、true——フォーム送信)
submitonce: false,//検証に合格した直後にフォームを送信するかどうか
submitbutton: null,//送信ボタン ID またはオブジェクト
getformdata: null, //function (formdata) { } (検証に合格した後) 入力フォームの値を取得します - このメソッドは isformpost=false の場合にのみ呼び出されます
//検証プロンプトの表示設定 (デフォルト: デフォルト)設定による)
tipshow: "default",
formid: "", //フォームの ID またはオブジェクトを確認します
tidymode: false, //ライト モード
errorfocus: true,
wideword : true,
//検証プロンプトのスタイル設定 (グローバル)
tipcss:
{
//(ajax) 読み込み処理
loadCss: "",
//フォーカス取得時 Style
focusCss: "",
//Prompt
noticeCss: "",
//Success
successCss: "",
//Failure
errorCss : " ",
//デフォルト状態
defaultCss: ""
}
};
controlOptions.tipcss = controlOptions.tipcss || {} ;
//設定全体をマージします (ディープコピー)
$.extend(true, settings, controlOptions);
if (!settings.isformpost) {
if (!settings.submitbutton ) {
alert("送信ボタンを空にすることはできません! ");
return;
}
_GetJqObj(settings.submitbutton).click(function () {
var pageIsValid = $.formValidator.pageIsValid(settings.validatorgroup);
if ( pageIsValid && _IsFunction(settings.getformdata)) {
var formData = _GetFormData(settings.filterInputStrFun)
settings.getformdata(formData)
}
settings.tipshow = settings.tipshow || "default";
//合理化モードの場合、エラーが発生すると最初のエラー コントロールはフォーカスされません
if (settings.tidymode) {
settings.errorfocus = false;
}
if (settings.formid) {
_GetNodeById(settings.formid).submit(function () {
//フォーム送信でない場合はブロックフォームを送信
return settings.isformpost ? $.formValidator.pageIsValid(settings.validatorgroup) : false;
}
if (_jQuery_formValidator_initConfig_Array == null) {
_jQuery_formValidator_initConfig_Array = new Array ();
}
_jQuery_formValidator_initConfig_Array.push(settings);
}
//ヒント情報を設定します
setTipState: function (elem, showCssEnum, showmsg) {
var settings0 = elem .settings[0];
var initConfig = $.formValidator.getInitConfig(setting0.validatorgroup);
if (initConfig.alertmessage && showmsg) {
alert(showmsg); 🎜> }
var jq_tipObj = settings0.tipJqObj;
vartip_IsNull(jq_tipObj);
showmsg = showmsg ||
if (initConfig .tidymode) {
//プロンプト情報を保存
elem.Tooltip = showmsg;
if (showCssEnum != _tipCssEnum.errorCss && showCssEnum != _tipCssEnum.noticeCss)
jq_tipObj.hide() ;
}
jq_tipObj.removeClass();
//ヒントのスタイルを設定します
var showClass = settings0.tipcss[showCssEnum]
//noticeCss が設定されていない場合は、errorCss を使用します。 >if (String.isNullOrEmpty(showClass) && showCssEnum == _tipCssEnum.noticeCss) {
showCssEnum = _tipCssEnum.errorCss;
showClass = settings0.tipcss[showCssEnum];
if (!String .isNullOrEmpty (showClass)) {
//現在のヒント ラベル表示のスタイルを保存します (列挙値)
elem.showcssenum = showCssEnum;
jq_tipObj.addClass(showClass); >jq_tipObj.html(showmsg);
}
}


4. より多くのニーズに応え、機能と使いやすさを向上させるために、次のようないくつかのプロパティを initConfig 構成オブジェクトに追加しました。
filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str);入力文字列をフィルタリングするメソッド [設定可能] - 入力文字列をフィルタリングするニーズを満たすため
Isformpost: false, //フォーム送信かどうか (デフォルト: false - 非フォーム送信、通常は ajax Submit, true - フォーム送信) - Ajax 送信とフォーム送信のニーズを満たすため
Getformdata: null, //function (formdata) { } (検証後) 入力フォーム値を取得します - isformpost=false のみ
ヒントショー: "default", //検証プロンプトの表示設定 (デフォルト: 設定に応じたデフォルト) - ID またはカスタム jQuery 検索 (検索) メソッドに基づいて、検証プロンプト ラベル オブジェクトの検索方法を設定します。

プラグインの使用方法は次のとおりです。
コードをコピーします コードは次のとおりです。




您好,欢迎来到山水檀溪!
退出


















添加栋号 >> 第一步








山水檀溪















待售

期房

现房

尾房

售完











  • 普通住宅


  • 单身公寓


  • 复式


  • 别墅


  • 厂房


  • 写字楼


  • 商铺


  • 经济适用房














































  id="btnCancel_Step1" type="button" class="jy_fcadminbottom02" value="取 消" />
















最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート