この記事では、一般的にさまざまなフォーム、リンク、ボタンを処理します。 JavaScriptフォーム処理の操作方法を教えてくれます。特定のコンテンツは次のとおりです
/** *一般的なフォーム処理js * @author anthony.chen *//** *プッシュボタンアクション[btn_action] data data data data data data data form * precriptがある場合、 "strict"を使用します。 var ajax_action_button = function（e）{var btn = $（this）; //処方var pre_scriptを追加します。 if（pre_script = btn.attr（ "pre_script"））{var ret = eval（pre_script）; if（ret == false）{return false; }} var btn_action = btn.attr（ 'value'）; if（btn_action）{$（this）.closest（ 'form'）。data（ 'btn_action'、{name： 'btn_action'、value：btn_action}）; }}; /** *フォーム要素、key、valueを使用してフォーメンタメントの追加フォームデータを更新 */var ajax_update_post_data = function（formele、k、v）{var form = $（formele）; var post_data = form.data（ 'post_data'）; if（post_data == undefined）{post_data = {}; } if（v == undefined）{delete post_data [k]; } else {post_data [k] = v; } form.data（ 'post_data'、post_data）; trueを返します;}; /** * boolチェックボックスは、値を外す必要がある特別なチェックボックスです * ajaxフォームで投稿する必要があります。 var formele = ipt.closest（ "form"）; var _check = ipt.prop（ "checked"）; if（_check）{ajax_update_post_data（formele、ipt.attr（ 'name'））; } else {ajax_update_post_data（formele、ipt.attr（ 'name'）、 'f'）; }}; /** * initスピン番号 */var spin_number = function（）{var spin = $（this）; var config = {lock：true、imagebasepath： '{webpath}/css/images/spin/'、btncss：null、txtcss：null、btnclass： 'spin_btn'、}; var interval = spin.attr（ 'interval'）; if（interval）{config.interval = interval; } else {config.interval = 1; } var min = spin.attr（ 'min'）; if（min）{config.min = min; } var max = spin.attr（ 'max'）; if（max）{config.max = max; } spin.spin（config）; trueを返します;}; /** * init date input */var date_input = function（）{var ipt = $（this）; var config = {offset：[4,0]、selectors：true、lang： '{lang}'、初日：1、形式： 'yyyy-mm-dd'、}; var min = ipt.attr（ 'min'）; if（min）{config.min = min; } ipt.dateInput（config）; trueを返します;}; /** * init timepicker */var time_picker = function（）{var ipt = $（this）; var config = {}; var step = ipt.attr（ "step"）; if（step）{config.step = step; } ipt.timepicker（config）; trueを返します;}; /** * generic ajax form post function * btn_actionが設定されている場合、フォームにデータを追加 * returiが設定されている場合、リダイレクトは返されます *リロードが設定されている場合、reload * else show block message * *フォームが検証されます。 */var ajax_form_post = function（e）{var form = $（this）; var pre_script; if（pre_script = form.attr（ "pre_script"））{var ret = eval（pre_script）; if（ret == false）{return false; }} var errhint = form.find（ "。formerror"）。first（）; if（errhint.size（）== 0）{errhint = $（ "＃pageerror"）; } errhint.text（ ''）。hide（）; // PageError if（！e.isdefaultPrevented（））{// all .formerror $ .blockui（{message： "{__（ 'l_processing'）}"}）; var formarray = form.serializearray（）; var btn_action_data; var btn_action; if（btn_action_data = form.data（ 'btn_action'））{formarray.push（btn_action_data）; form.removedata（ 'btn_action'）; btn_action = btn_action_data.value; } else {btn_action = ''; } console.log（ 'btn action：'+btn_action）; //追加データを追加するvar post_data; if（post_data = form.data（ 'post_data'））{for（var k in post_data）{// post_data [k]が配列の場合、formarray.push（{name：k、value：post_data [k]}）; } form.removedata（ 'post_data'）; } $ .post（form.attr（ 'action'）、formarray、function（json）{if（$（windo）.data（ 'blockui.isblocked'）== 1）{$ .unblockui（）;} if（json.code === true）{var returi = "; （json.data）{retdata = json.data; $ .blockui（{メッセージ：css： 'cursor'、 '4px'、border： '3px solid＃cc0000'、}、{cursor： 'pointer'}}）; returi = form（ 'returi'））{windoce = returi; } else {if（typeof（json.data.errmsg）== 'string'）{errhint.html（json.data）.show（）; Overlaycss：{cursor： 'pointer'}}）; json.data [p]; form.find（ "hidden-id = refid+"]）。 json.data [refname] =+msg; E.PreventDefault（）; } else {errhint.html（ "{html :: text（__（ 'e_form'））}"）。show（）; }}; /****入力をリセット*/var ajax_post_form_hidden = function（）{var form = $（this）; form.find（ "[hidden-id]"） $（これ）; }）; var validate_hidden_id = function（input）{var refid = input.attr（ "hidden-id"）; var field = $（ "＃" + refid + ""）; var msg = field.attr（ 'msg'）; if（！msg）{msg = "{__（ 'e_not_empty'）}"; } return field.val（）？ True：MSG; }; var data_equals_validate = function（input）{var field; var name = input.attr（ "data-equals"）; field = this.getInputs（）。フィルター（ "[name =" + name + "]"）; return input.val（）== field.val（）？ True：[name];}; /** * linkを介したajaxリクエスト *確認書の場合は、送信前に確認 *サポートリターンとリロード * else show block message */var ajax_link_req = function（）{var l = $（this）; var hint = l.attr（ 'ヒント'）; if（hint）{var errhint = $（l.attr（ 'hint'））; errhint.text（ ''）。hide（）; } //確認メッセージが設定されている場合、クライアントから確認する必要がありますif（l.attr（ 'cundile'））{if（！ciend（l.attr（ 'consile'）））{return false; }} $ .blockui（{message： "{__（ 'l_processing'）}"}）; var pre_script; if（pre_script = l.attr（ "pre_script"））{var ret = eval（pre_script）; if（ret == false）{return false; }} var block = l.attr（ 'block'）; if（block！= undefined）{ajaxautounblock = false; } $ .get（l.attr（ 'href'）、function（json）{if（json.code == true）{var retdata = "{__（ 'l_processed'）}！"; var returi; // } if（json.data）{retdata = json.data; if（l.attr（ 'reload'）！= undefined）{windocy.location.reload（）; $（ "。blockui"）。 falseを返します;}; /** *ボタンベースナビゲーションのサポート *新しいHREFにのみジャンプ */var btn_nav = function（）{var input = $（this）; var href = input.attr（ "href"）; if（href）{window.location = href; } else {alert（ "href not set"）; } return false;}; /** *サポートボタンベースAJAX Get Method Request *サポートリターンとリロード */var btn_req = function（）{var input = $（this）; var href = input.attr（ "href"）; var hint = input.attr（ 'ヒント'）; if（hint）{var errhint = $（hint）.first（）; if（errhint.size（）== 0）{errhint = $（ "＃pageerror"）; } errhint.text（ ''）。hide（）; } var block = input.attr（ 'block'）; if（block！= undefined）{ajaxautounblock = false} $ .get（href、function（json）{if（json.code == true）{var returi; if（returi = input.attr（ 'returi'））{window.location = returi;} els（input.attr（ "reload"！ windocation.reload（）; }}） ＃cc0000 '、}、overlaycss：{cursor：' pointer '}）; falseを返します;}; /** * generic ajaxチェックボックス *デフォルトのアクションが防止され、urlを介して実際の要求を送信します */var ajax_checkbox = function（）{event.preventdefault（）; var action = $（this）; var url = action.attr（ 'url'）; var _check = action.prop（ "checked"）; console.log（_check）; var op; if（_check）{op = "1"; } else {op = "0"; } $ .get（url + op、function（json）{if（json.code == true）{if（_ check）{action.prop（ "checked"、true）;} else {action.prop（ "checked"、false）;} return true; /** * Crete Root PickList */var picklistinit = function（）{var _select = $（this）; var _hidden_id = _select.attr（ 'hidden-id'）; var _un = _select.attr（ 'un'）; var _lovchildren = _select.data（ 'lovtree'）。c; VAR _ROWVALUE = _SELECT.DATA（ 'RowValue'）; $（ "<option>"）。append（ "{__（ 'l_select'）}"）。appentto（_select）; for（_lovchildrenのvar _kid）{var _lov = _lovchildren [_kid] ['lov']; $（ "<option>"）。val（_lov.lov_id）.append（_lov.v）.attr（ 'k'、_ lov.id）.attr（ 'is_leaf'、_ lov.is_leaf）.appendto（_select）; } _select.change（pickListChange）; // [_ROWValue）{_Select.find（ "[value ="+_ rowValue [0]+"]"）。prop（ "selected"、true）; _select.change（）; } return true;}; /** *選択リストを選択 */var pickListChange = function（）{var _select = $（this）; var _hidden_id = _select.attr（ 'hidden-id'）; var _un = _select.attr（ 'un'）; //後続のすべてのvar _lovtree = _select.data（ 'lovtree'）; VAR _ROWVALUE = _SELECT.DATA（ 'RowValue'）; _select.nextall（）。remove（）; //これは現在の選択の値var _selected = _select.find（ '：selected'）; if（_selected.attr（ 'is_leaf'）== "{db :: t}"）{$（ "＃"+_ hidden_id）.val（_select.val（））; _select.after（ "<img src = '/s.gif' class = 'sprite_global successimg'/>"）; } else {var _val = _select.val（）; var _k = _selected.attr（ 'k'）; //子供の取得リストif（_lovtree.c [_k] .c == undefined）{return false; } var _c_lovtree = _lovtree.c [_k]; var _c_select = $（ '<elect>'）。データ（ 'lovtree'、_ c_lovtree）。 data（ 'rowvalue'、_ rowvalue）。 attr（ 'hidden-id'、_ hidden_id）.attr（ 'un'、_ un）。 attr（ 'name'、_ un+'_'+_ k）; $（ "<option>"）。append（ "{__（ 'l_select'）}"）。 //（_c_lovtree.cのvar _kid）のオプションリストを構築する{var _lov = _c_lovtree.c [_kid] ['lov']; $（ "<option>"）。val（_lov.lov_id）.append（_lov.v）.attr（ 'k'、_ lov.id）.attr（ 'is_leaf'、_ lov.is_leaf）.appendto（_c_select）; // _select.after（_c_select）の後に挿入します。 // onchange} _c_select.change（pickListChange）; if（_RowValue）{_c_select.find（ "[value ="+_ rowValue [_k]+"]"）。prop（ "selected"、true）; _c_select.change（）; }}}; var lookup_new = function（）{var lookup = $（this）; var pre_script; if（pre_script = lookup.attr（ "pre_script"））{var ret = eval（pre_script）; if（ret == false）{return false; }} var url = lookup.attr（ "url"）; if（！url）{alert（ 'url not set'）; falseを返します。 } var height = lookup.attr（ 'h'）; if（！height）{height = 600; } var width = lookup.attr（ 'w'）; if（！width）{width = 800; } window.open（url、 "pselect"、 "scrollbars = yes、menubar = ne、height ="+height+"、width ="+width+"、resizable = yes、toolbar = no、no、no、no、status = no"）; falseを返します。 }; /** * Hidden Valueの新しい値 */var parent_lookup = function（）{var lookup = $（this）; var pid = opener。$（ "＃" + lookup.attr（ 'pid'））; if（！pid.length）{alert（lookup.attr（ 'pid'）+ "not ing ind"）; falseを返します。 } var pname = opener。$（ "＃" + lookup.attr（ 'pname'））; if（！pname.length）{alert（lookup.attr（ 'pname'）+ "not ing ind"）; falseを返します。 } var aft_script; //スクリプトの後に電流を実行するif（aft_script = lookup.attr（ 'aft_script'））{window.eval（aft_script）; } pid.val（$（this）.attr（ "refid"））; //オープナーからの操作のみが変更される可能性がありますevent pid.change（）; pname.val（$（this）.attr（ "refvalue"））; pname.change（）; // parent after_script if（aft_script = pname.attr（ 'aft_script'））{opener.window.eval（aft_script）; } if（aft_script = pid.attr（ 'aft_script'））{opener.window.eval（aft_script）; } window.close（）;}; /** * default upload complete * /// var uploadcomplete = function（event、id、filename、responsejson）{var uploadcomplete = function（e、data）{// jquery uploader var _fileupload = $（this）; //console.log(_fileupload）; //console.log(data.Result）; if（_fileupload.attr（ 'reload'）！= undefined）{window.location.reload（）; }}; /**ファイルアップロード関数、アップロードのアクションを制御するための次の属性 * 'endpoint' as url * 'sid'として 'sid' 'sid *' complete 'complete' optional complete complete function */var genericupload = function（dom）{var endpointurl = $（this）.attr（ 'endpoint'）; var sid = $（this）.attr（ "sid"）; var sid = $（this）.attr（ "sid"）; var completefunc = 'uploadcomplete'; //カスタム完全function var cuscomplete = $（this）.attr（ 'complete'）; if（cuscomplete）{completefunc = cuscomplete; } $（this）.fileupload（{url：endpointurl、autoupload：true、datatype： 'json'、formdata：[{'sessionid'：sid}]、 'filedata'、}）。 /** *入力と一致したエラー *ここでは一致したエラーのみを識別できます */var Advance_validate = function（error、event）{var conf = this.getConf（）; // loop errors $ .each（エラー、関数（インデックス、エラー）{//入力dom要素にクラスを追加するdom element var input = error.inputs; addclass（conf.errorclass）; //エラーコンテナvar msg = input.data（ "msg.el"）; {// msg = $（conf.message）.addclass（入力）; 'hidden'}） msg.Parent（）。 var Advance_inputs = function（inputs）{var conf = this.getConf（）; inputs.removeclass（conf.errorclass）.each（function（）{var msg = $（this）.data（ "msg.el"）; if（msg）{msg.hide（）; msg.parent（）。removeclass（ "colerror"）;}}）; if（$（ "。colerror"）。size（）== 0）{var form = $（this）; var errhint = form.find（ "。formerror"）。first（）; if（errhint.size（）== 0）{errhint = $（ "＃pageerror"）; errhint.text（ ''）。hide（）; }}}; /** * refnameが選択されるように含まれている場合 */var checkall = function（）{var check = $（this）; var refname = check.attr（ 'refname'）; if（refname）{if（check.prop（ "checked"））{$（ "input [name*= '"+refname+"']"）。prop（ "checked"、true）; } else {$（ "input [name*= '"+refname+"']"）。prop（ "checked"、false）; }} var refclass = check.attr（ 'refclass'）; if（refclass）{if（check.prop（ "checked"））{$（ "input。"+refclass）.prop（ "checked"、true）; } else {$（ "input。"+refclass）.prop（ "checked"、false）; }}}; /** * readonlyチェックボックスのセットアップ */var readonlycheck = function（e）{e.preventdefault（）; falseを返します;}; /** * select list disable */var readonlyselect = function（）{$（this）.prop（ "disabled"、true）; }; $（document）.ready（function（）{$（document）.ajaxstart（function（）{// ajax requestページレベルエラー$（ "＃pageerror"）。text（ ''）。hide（）; hide（）; // teh formエラー$（ "。 $ .blockui（{__（ 'l_processing'）} "}）; $ .UNBLOCKUI（）; url = '+settings.url）; if（$（windo）.data（' blockui.isblocked '）{if（ajaxautounblock）{$ .unblockui（）; ajaxsynchronized = true; }}}）; $ .tools.validator.addeffect（ "advanced"、advance_inputs）; $ .tools.validator.fn（ "[hidden-id]"、validate_hidden_id）; $（spin_number "）。 lang： 'lang}、' advanced '}）。 $（parent_lookup）;ポジション：「Center Right」}）; // $ .tools.validator.localize（ "{lang}"、{'*'： "{__（ 'e_all'）}"、 '：email'： "{__（ 'e_email'）}」 {__（ 'e_url'）} "、 '[max]'：" {__（ 'e_max_length'）} "、 '[min]'：" {__（ 'e_min_length'）} "、 '" reby]'： "{__（ 'e_not_empty'）}"、};};};上記はこの記事のすべての内容です。誰もがJavaScriptフォーム処理操作を習得することが役立つことを願っています。読んでくれてありがとう。