Este artigo lida com várias formas, links e botões em geral. Ele ensina como operar o processamento de formulários JavaScript. O conteúdo específico é o seguinte
/** * Processamento de formulário genérico JS * @Author Anthony.chen *//** * Ação do botão de pressão [btn_action] Dados em formulário * Se houver prescrição, execute o script pré -script */"use strict"; // All Ajax Solicitação é sincronizado por defaultVar ajaxsynCronized = true; // all ajax ajax Ajed Willing Willing Willing Willing Willing Willing AJBLAXSYSTILIZED = True; // All ajax AJAX AJAX Willing Willing Willing Willing Willing Willing Willing por UNBLAXSYSTILIZED = TRUE; // All AJAX AJAX var ajax_action_button = function (e) {var btn = $ (this); // Adicione prescript var pre_script; if (pre_script = btn.attr ("pre_script")) {var ret = avaliador (pre_script); if (ret == false) {return false; }} var btn_action = btn.attr ('value'); if (btn_action) {$ (this) .Closest ('formulário'). data ('btn_action', {name: 'btn_action', valor: btn_action}); }}; /** * Atualize os dados de formulário extra no formulário com elemento de formulário, chave e valor */var ajax_update_post_data = function (formele, k, v) {var form = $ (formEle); var post_data = form.data ('post_data'); if (post_data == indefinido) {post_data = {}; } if (v == indefinido) {exclua post_data [k]; } else {post_data [k] = v; } form.data ('post_data', post_data); retornar true;}; /** * Caixa de seleção BOOL é uma caixa de seleção especial que precisa manter o valor desmarque * e postar com o formulário AJAX, o formulário está no pai */var bool_checkbox = function () {var ipt = $ (this); var forele = ipt.closest ("forma"); var _check = ipt.prop ("verificado"); if (_check) {ajax_update_post_data (forele, ipt.attr ('nome')); } else {ajax_update_post_data (forele, ipt.attr ('nome'), 'f'); }}; /** * init o número do spin */var spin_number = function () {var spin = $ (this); var config = {bloqueio: true, imageBasepath: '{webPath}/css/imagens/spin/', btncss: null, txtcss: null, btnclass: 'spin_btn',}; var interval = spin.attr ('intervalo'); if (interval) {config.interval = intervalo; } 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); retornar true;}; /** * init a entrada da data */var date_input = function () {var ipt = $ (this); var config = {offset: [4,0], Selectors: true, lang: '{lang}', primeiro dia: 1, formato: 'yyyy-mm-dd',}; var min = ipt.attr ('min'); if (min) {config.min = min; } ipt.dateInput (config); retornar true;}; /** * init o timepicker */var time_picker = function () {var ipt = $ (this); var config = {}; var step = ipt.attr ("step"); if (step) {config.Step = step; } ipt.TimePicker (config); retornar true;}; /** * FUNCIONAÇÃO GERAL AJAX POST FUNÇÃO * Se BTN_Action estiver definido, adicione dados no formulário * Se o Returi estiver definido, redirecione para retornar * Se o recarregar estiver definido, recarregue * else Mostrar mensagem de bloco * * O formulário será validado. */var ajax_form_post = function (e) {var form = $ (this); var pre_script; if (pre_script = form.attr ("pre_script")) {var ret = avaliador (pre_script); if (ret == false) {return false; }} var errrhint = form.find (". Formerror"). primeiro (); if (errhint.size () == 0) {errhint = $ ("#PageError"); } errhint.text (''). hide (); // Limpe o PageError if (! E.isDefaultPreventEd ()) {// Ocultar tudo .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); // Adicione dados extras var post_data; if (post_data = form.data ('post_data')) {for (var k em post_data) {// se post_data [k] é matriz, precisa mais para fazer formArray.push ({nome: k, valor: post_data [k]}); } form.Removedata ('post_data'); } $ .post (form.attr ('ação'), formArray, function (json) {if ($ (window) .data ('blockui.isblocked') == 1) {$ .unblockui ();} if (json.code ===) {var returi = ""; vardata "; if (json.data) {retdata = json.data; $ .blockui ({message: retdata, css: {cursor: 'ponteiro', preenchimento: '4px', borda: '3px Solid #cc0000',}, sobrecarregar -se: {se istlen; if (RETURI = form.attr (Returi ')) {Window.Location = Returi; } else {if (typeof (json.data.errmsg) == 'string') {errhint.html (json.data) .show (); Overycss: {cursor: 'Pointer'}}); JSON.DATA [P]; Form.Find ("Hidden-ID ="+RefID+"]"). Att (Nome "); json.data [refName] =+msg; E.PreventDefault (); } else {errhint.html ("{html :: text (__ ('e_form')}"). show (); }}; /****Redefina a entrada*/var ajax_post_form_hidden = function () {var form = $ (this); form.find ("[oculto-id]"). cada (function () {// limpe a mensagem de referência var input = $ (this); var refID = input.attr ("hidden-id"); var field = $ ("#" + refid + "); hinput = $ (this); }); 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 ()? Verdadeiro: msg; }; var data_equals_validate = function (input) {var field; var name = input.attr ("dados-equals"); campo = this.getInputs (). filtro ("[name =" + name + "]"); retornar input.val () == field.val ()? Verdadeiro: [nome];}; /** * Solicitação AJAX através do link * Se confirmar estiver definido, confirme antes da solicitação de envio * Retorno e recarregar o suporte * else Mostrar mensagem de bloco */var ajax_link_req = function () {var l = $ (this); var dint = l.attr ('dica'); if (dica) {var errrhint = $ (l.attr ('dica')); errhint.text (''). hide (); } // Se a mensagem confirmar for definida, deverá ser confirmada no cliente se (l.attr ('confirm')) {if (! Confirm (l.attr ('confirm'))) {return false; }} $ .blockui ({message: "{__ ('l_processing')}"}); var pre_script; if (pre_script = l.attr ("pre_script")) {var ret = avaliador (pre_script); if (ret == false) {return false; }} var block = l.attr ('bloco'); if (block! = indefinido) {ajaxautounBlock = false; } $ .get (l.attr ('href'), function (json) {if (json.code == true) {var retData = "{__ ('l_proceded')}!"; var repruri; // se o sucesso da função executada para cada var successfunc = l.attr ('succen'); if (json.data) {retdata = json.data; if (l.attr ('recarregue')! = indefinido) {window.location.reload (); $ ("Blockui"). retornar false;}; /** * Suportando a navegação da base de botões * Salte apenas para o novo href */var btn_nav = function () {var input = $ (this); var href = input.attr ("href"); if (href) {window.Location = href; } else {alert ("href não definido"); } retornar false;}; /** * Botão de suporte AJAX AJAX GET SOLDA * RETURNA DE APOIO E RELOAD */var Btn_req = function () {var input = $ (this); var href = input.attr ("href"); var dint = input.attr ('dica'); if (dica) {var errrhint = $ (dica) .first (); if (errhint.size () == 0) {errhint = $ ("#PageError"); } errhint.text (''). hide (); } var block = input.attr ('bloco'); if (block! = indefinido) {ajaxautounblock = false} $ .get (href, function (json) {if (json.code == true) {var reTuri; if (reTuri = input.attr ('reTuri)) {window.location = returi; elsen) Window.Location.Reload (); }); #Cc0000 ',}, sobrecarrega: {cursor:' Pointer '}}); retornar false;}; /** * Caixa de seleção genérica AJAX * A ação padrão é impedida e enviada solicitação real através do URL */var ajax_checkBox = function () {event.preventDefault (); var ação = $ (this); var url = ação.attr ('url'); var _check = action.prop ("verificado"); 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 ("verificado", false);} retornar true;} {retornar false;}}, 'json'); /** * Creta 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'); $ ("<pution>"). Append ("{__ ('l_select')}"). Appendto (_select); para (var _kid em _lovchildren) {var _lov = _lovchildren [_kid] ['lov']; $ ("<pution>"). } _select.Change (PickListChange); // Selecione a lista se (_rowValue) {_select.find ("[value ="+_ rowValue [0]+"]"). Prop ("selecionado", true); _select.change (); } retornar true;}; /** * Selecione a lista de escolha */var pickListChange = function () {var _select = $ (this); var _hidden_id = _select.attr ('Hidden-id'); var _un = _select.attr ('un'); // remova todos os subsequentes var _lovtree = _select.data ('lovtree'); var _RowValue = _Select.Data ('rowValue'); _select.NexTall (). Remow (); // Este é o valor da corrente selecionar var _selected = _select.find (': selecionado'); 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'); // Lista de crianças de obtenção se (_lovtree.c [_k] .c == indefinido) {return false; } var _c_lovtree = _lovtree.c [_k]; var _c_select = $ ('<select>'). data ('lovtree', _ c_lovtree). Dados ('RowValue', _ RowValue). att ('oculto-id', _ hidden_id) .attr ('un', _ un). att ('nome', _ un+'_'+_ k); $ ("<pution>"). Append ("{__ ('l_select')}"). Appendto (_C_Select); // criando a lista de opções para (var _kid em _c_lovtree.c) {var _lov = _c_lovtree.c [_kid] ['lov']; $ ("<pution>"). // inserir após _select.after (_c_select); // onchange} _c_select.change (picklistchange); if (_rowValue) {_c_select.find ("[value ="+_ rowValue [_k]+"]"). prop ("selecionado", true); _c_select.change (); }}}; var lookup_new = function () {var lookup = $ (this); var pre_script; if (pre_script = lookup.attr ("pre_script")) {var ret = avaliador (pre_script); if (ret == false) {return false; }} var url = lookup.attr ("url"); if (! url) {alert ('url não definido'); retornar falso; } var altura = lookup.attr ('h'); if (! altura) {altura = 600; } var width = lookup.attr ('W'); if (! width) {width = 800; } window.open (url, "PSelect", "ScrollBars = sim, menubar = não, altura ="+altura+", largura ="+width+", redimensionável = sim, barra de ferramentas = não, localização = não, status = não"); retornar falso; }; /** * pesquisa novo valor para o valor oculto */var parent_lookup = function () {var lookup = $ (this); var pid = abridor. $ ("#" + lookup.attr ('pid')); if (! pid.length) {alert (lookup.attr ('pid')+ "não encontrado"); retornar falso; } var pname = abridor. $ ("#" + lookup.attr ('pname')); if (! pname.length) {alert (lookup.attr ('pname')+ "não encontrado"); retornar falso; } var aft_script; // Execute a corrente após o script if (aft_script = lookup.attr ('aft_script')) {window.eval (aft_script); } pid.val ($ (this) .attr ("refid")); // Somente operação do abridor pode desencadear o evento PID.CHANGE (); pname.val ($ (this) .attr ("refvalue")); pname.change (); // pai posterior_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 ();}; /** * upload padrão completo * /// var uPLOPCOMPLETE = function (evento, id, nome do arquivo, respostajson) {var uPLOPLECLEPLETE = function (e, dados) {// a ser substituído pelo upload do jQuery var _fileUpload = $ (this); //console.log(_fileUpload); //console.log(data.result); if (_fileUpload.attr ('Reload')! = indefinido) {window.Location.Reload (); }}; /** * Função de upload de arquivo, o seguinte atributo para controlar a ação do upload * 'endpoint' como upload url * 'sid' como id * '' completo 'opcional para configurar a função completa de upload personalizada */var genriCUPLOAD = function (dom) {var endpointurl = $ (this) .attr (' endpoint '); var sid = $ (this) .attr ("sid"); var sid = $ (this) .attr ("sid"); var completefunc = 'uploadComplete'; // Configurar função completa personalizada var cusComplete = $ (this) .attr ('complete'); if (cusComplete) {completefunc = cuscomplete; } $ (this) .FileUpload ({url: endpointUrl, automaticamente: true, datatype: 'json', formData: [{'sessionId': sid}], paramname: 'filedata',}). bind ('fileUPLOADDONE', janela [completefunc]; /** * Erros correspondentes com a entrada * Somente erros correspondentes puderam ser identificados aqui */var avide_validate = function (erros, evento) {var conf = this.getConf (); // Loop erros $ .ECH (erros, função (índice, erro) {// Adicione a classe de erro no elemento dom (! msg) {// msg = $ (conf.message) .addclass (conf.messageclass) .insertafter (entrada); msg.css ({visibilidade: 'Hidden'}). Find ("span"). Remover (); == msg.parent (). width ()) {msg.add (msg.find ("span"); var avide_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 ($ (". var errrhint = form.find (". Formerror"). primeiro (); if (errhint.size () == 0) {errhint = $ ("#PageError"); errhint.text (''). hide (); }}}; /** * Quando o refName está contido para ser selecionado */var checkall = function () {var check = $ (this); var refName = check.attr ('refName'); if (refName) {if (check.prop ("checked")) {$ ("input [nome*= '"+refName+"']"). prop ("verificado", true); } else {$ ("input [nome*= '"+refName+"']"). prop ("verificado", false); }} var refclass = check.attr ('refclass'); if (refclass) {if (check.prop ("checked")) {$ ("input."+refclass) .prop ("verificado", true); } else {$ ("input."+refclass) .prop ("verificado", false); }}}; /** * Configure a caixa de seleção readonly */var readOnlyCheck = function (e) {e.PreventDefault (); retornar false;}; /** * Selecione Lista desativar */var readOnLelect = function () {$ (this) .Prop ("desativado", true); }; $ (document) .ready (function () {$ (document) .ajaxstart (function () {// Limpe o erro do nível da página de solicitação do AJAX $ ("#PageError"). Texto (''). hide (); // limpeza teh error $ (". formerror"). text ('). $ .blockui ({mensagem: "{__ ('l_processing')}"}); .unblockui (); Url = '+Settings.url); AjaxsyChronized = true; }}}); $.tools.validator.fn("[hidden-id]",validate_hidden_id); $(".ajax_form_post").validator({ lang:'{lang}',effect:'advanced' }) .submit( ajax_form_post ); $(".ajax_form_post").each(ajax_post_form_hidden); $ (". Lang: '{lang}', efeito: 'Advanced'}); ". Posição: "Center Right"}); "{__ ('e_url')}", '[max]': "{__ ('e_max_length')}", '[min]': "{__ ('e_min_lengthy')}, '[requerir]:" {__ (' e_not_empty ')} ", [requerir]:" {__ (' e_not_empty ')} ",' [requerir]:" {__ ('e_not_empty')} ","O exposto acima é todo o conteúdo deste artigo. Espero que seja útil que todos dominem as operações de processamento de formulários JavaScript. Obrigado pela sua leitura.