Cet article gère diverses formes, liens et boutons en général. Il vous apprend à faire fonctionner le traitement de formulaire JavaScript. Le contenu spécifique est le suivant
/ ** * Traitement de formulaire générique js * @author Anthony.chen * / / ** * Action du bouton-poussoir [BTN_ACTION] Données sous forme * S'il y a du prescript, exécutez le pré-script * / "Utiliser Strict"; // Toutes les demandes ajax sont synchronisées par DefaultVar ajaxSynchronisé = true; // toute la demande Ajax sera unblock by byvarvar ajaxaUtound = true; var ajax_action_button = fonction (e) {var btn = $ (this); // Ajouter le PREScript 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', valeur: btn_action}); }}; / ** * Mettez à jour les données de formulaire supplémentaires en forme avec l'élément de formulaire, la clé et la valeur * / var ajax_update_post_data = fonction (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); return true;}; / ** * BOOL CHESTERBOX est une case à cocher spéciale qui doit conserver la valeur décocher * et publier avec le formulaire ajax, le formulaire est dans le parent * / var bool_checkbox = function () {var ipt = $ (this); var Formele = ipt.closest ("form"); var _check = ipt.prop ("vérifié"); if (_check) {ajax_update_post_data (Formele, ipt.attr ('name')); } else {ajax_update_post_data (Formele, ipt.attr ('name'), 'f'); }}; / ** * init le numéro de spin * / 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); return true;}; / ** * INIT L'entrée de date * / var date_input = function () {var ipt = $ (this); var config = {offset: [4,0], sélecteurs: true, lang: '{lang}', premier jour: 1, format: 'yyyy-mm-dd',}; var min = ipt.attr ('min'); if (min) {config.min = min; } ipt.dateInput (config); return true;}; / ** * init le timepicker * / var time_picker = function () {var ipt = $ (this); var config = {}; var Step = ipt.attr ("Step"); if (Step) {config.step = Step; } ipt.timePicker (config); return true;}; / ** * Fonction de post de formulaire ajax générique * Si BTN_ACTION est défini, ajoutez les données dans le formulaire * Si Retturi est défini, redirigez vers Retour * Si le rechargement est défini, rechargez * Else Show Block Message * * Le formulaire sera validé. * / var ajax_form_post = fonction (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 (); // Nettoie la pageError if (! E.IsDefaultPreveted ()) {// Masquer tous .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); // ajouter des données supplémentaires var post_data; if (post_data = form.data ('post_data')) {for (var k dans post_data) {// if post_data [k] est array, a besoin de plus pour faire formarray.push ({name: k, value: post_data [k]}); } form.removedata ('post_data'); } $ .post (form.attr ('action'), formarray, function (json) {if ($ (window) .data ('blockui.isblocked') == 1) {$ .unblockui ();} if (json.code === true) {var returi = ""; var retdata = "{__ ('l_processed');! if (json.data) {retdata = json.data;} // toDo ajout de support pour permettre de sauver et de rester (btn_action == 'reqonly') {if (returi = form.attr ('returi')) {$ (window) .data ('blockui.returi', returi); $ .blockui ({message: retdata, css: {cursor: 'pointer', padding: '4px', border: '3px solide # cc0000',}, superlaycss $: {Cursor: "Pointer '}}); if (returi = form.attr ('returi') {window.location = returi; } else {if (typeof (json.data.errmsg) == 'string') {errhint.html (json.data) .show (); OverlayCSS: {Cursor: 'Pointer'}}); JSON.DATA [P]; Form.Find ("Hidden-id =" + raffid + "]"). JSON.DATA [REFNAME] = + MSG;} // @ end}} / * * Vérification des valeurs cachées * / form.data ("Validator"). Invalidate (json.data); E.PreventDefault (); } else {errHint.html ("{html :: text (__ ('e_form'))}"). show (); }}; / *** * Réinitialiser l'entrée * / var ajax_post_form_hidden = function () {var form = $ (this); form.find ("[Hidden-id]"). Chaque (fonction () {// efface le message de référence var entrée = $ (this); var refid = input.attr ("Hidden-id"); var field = $ ("#" + refid + ""); // configurer le clear de l'errmsg // surveiller l'événement de modification sur l'élément ID, la suppression du message d'erreur // $ (ceci); }); var validate_hidden_id = fonction (input) {var refid = input.attr ("Hidden-id"); var champ = $ ("#" + raffid + ""); var msg = champ.attr ('msg'); if (! msg) {msg = "{__ ('e_not_empty')}"; } return field.val ()? VRAI: MSG; }; var data_equals_validate = function (input) {var champ; var name = input.attr ("data-equals"); field = this.getInputs (). filter ("[name =" + name + "]"); return input.val () == field.val ()? vrai: [name];}; / ** * Demande ajax via le lien * Si la confirmation est définie, confirmez avant l'envoi * support Retour et rechargement * else Show Block Message * / var ajax_link_req = function () {var l = $ (this); var hint = l.attr ('hint'); if (hint) {var errHint = $ (l.attr ('hint')); errHint.Text (''). Hide (); } // Si le message de confirmation est défini, il doit être confirmé à partir du client if (l.attr ('confirmer')) {if (! Confirm (l.attr ('confirm'))) {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) {ajaxautounlock = false; } $ .get (l.attr ('href'), fonction (json) {if (json.code == true) {var retdata = "{__ ('l_processed')}!"; var returi; // if Success to Execute function for every var SuccessFunc = l.attr ('Success'); if (json.data) {retdata = json.data;} // si cela nécessite un avertissement avant (l.attr ('value') == 'reqonly') {alert (retData);} else if (returi = l.attr ('returi') {window.location = returi; if (l.attr ('reload')! = Undefined) {window.location.reload ();} else {$ .blockui ({message: retdata, css: {cursor: 'pointer', padding: '4px', border: '3px solid # cc00000',}, superlayés: {cursor: 'Povernter}); $ (". Blockui"). return false;}; / ** * Soutenir la navigation de base de bouton * Saute uniquement vers le nouveau href * / var btn_nav = function () {var input = $ (this); var href = input.attr ("href"); if (href) {window.location = href; } else {alert ("href pas set"); } return false;}; / ** * Prise en charge de la base du bouton AJAX Get Method Demande de support Retour et rechargement * / var btn_req = function () {var input = $ (this); var href = input.attr ("href"); var hint = input.attr ('hint'); if (indice) {var errHint = $ (note) .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;} else if (input.attr ("reloaD")! = undefined) { Windows.location.reload ();} else {var retdata = "{__ ('l_processed')}!"; }});}} else {if (hint) {$ .unblockui (); # Cc0000 ',}, superlaycss: {cursor:' pointer '}}); $ (". Blockui"). return false;}; / ** * AJAX Generic Ajax Box * L'action par défaut est empêchée et soumise de la demande réelle via URL * / var ajax_checkbox = function () {event.PreventDefault (); var action = $ (this); var url = action.attr ('url'); var _check = action.prop ("vérifié"); console.log (_check); var op; if (_check) {op = "1"; } else {op = "0"; } $ .get (url + op, fonction (json) {if (json.code == true) {if (_check) {action.prop ("vérifié", true);} else {action.prop ("vérifié", false);} return true;} else {return false;}}, 'json');}; / ** * 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')}"). APPENDTO (_Select); pour (var _Kid dans _lovchildren) {var _lov = _lovchildren [_kid] ['lov']; $ ("<opoption>"). Val (_lov.lov_id) .append (_lov.v) .attr ('k', _ lov.id) .attr ('is_leaf', _ lov.is_leaf) .appendto (_select); } _select.change (pickListchange); // sélectionnez la liste if (_rowValue) {_select.find ("[value =" + _ RowValue [0] + "]"). Prop ("sélectionné", true); _Select.Change (); } return true;}; / ** * SELECT Pick List * / var pickListChange = function () {var _select = $ (this); var _hidden_id = _select.attr ('Hidden-id'); var _un = _select.attr ('un'); // supprime tous les var _lovtree = _select.data ('Lovtree'); var _rowvalue = _select.data ('rowValue'); _Select.nextall (). relève (); // Ceci est la valeur du courant sélectionnant var _selected = _select.find (': sélectionné'); 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'); // Obtenir la liste des enfants if (_lovtree.c [_k] .c == Undefined) {return false; } var _c_lovtree = _lovtree.c [_k]; var _c_select = $ ('<lect>'). data ('lovtree', _ c_lovtree). data ('rowValue', _ RowValue). att ('Hidden-id', _ Hidden_id) .Attr ('un', _ un). att ('name', _ un + '_' + _ k); $ ("<Option>"). Append ("{__ ('l_select')}"). APPENDTO (_C_Select); // Construire la liste des options pour (var _Kid dans _c_lovtree.c) {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); // insérer après _Select.After (_C_Select); // onchange} _c_select.change (pickListchange); if (_rowValue) {_c_select.find ("[value =" + _ rowValue [_k] + "]"). prop ("sélectionné", 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 non défini'); retourne false; } var height = lookup.attr ('h'); if (! height) {height = 600; } var width = lookup.attr ('w'); if (! width) {width = 800; } window.open (url, "pselect", "scrollbars = oui, menuBar = non, height =" + height + ", width =" + width + ", resizable = yes, toolbar = no, location = non, status = non"); retourne false; }; / ** * Recherchez une nouvelle valeur pour la valeur cachée * / var parent_lookup = function () {var lookup = $ (this); var pid = openner. $ ("#" + lookup.attr ('pid')); if (! pid.length) {alert (lookup.attr ('pid') + "non trouvé"); retourne false; } var pname = ouverture. $ ("#" + lookup.attr ('pname')); if (! pname.length) {alert (lookup.attr ('pname') + "non trouvé"); retourne false; } var aft_script; // Exécuter actuel après le script if (aft_script = lookup.attr ('aft_script')) {window.eval (aft_script); } pid.val ($ (this) .attr ("refid")); // uniquement l'opération de l'ouvreur pourrait déclencher l'événement de changement pid.change (); pname.val ($ (this) .attr ("RefValue")); pname.change (); // parent after_script if (aft_script = pname.attr ('aft_script')) {openter.window.eval (aft_script); } if (aft_script = pid.attr ('aft_script')) {openter.window.eval (aft_script); } window.close ();}; / ** * Téléchargement par défaut complet * /// var uploadComplete = fonction (événement, id, nom de fichier, réponsejson) {var uploadComplete = function (e, data) {// à remplacer par jQuery uploader var _fileupload = $ (this); //console.log(_fileupload); //console.log(data.result); if (_fileupload.attr ('reload')! = Undefined) {window.location.reload (); }}; / ** * Fonction de téléchargement de fichiers, l'attribut suivant pour contrôler l'action du téléchargement * 'endpoint' en tant que téléchargement URL * 'SID' en tant qu'ID de session * 'Complete' Facultatif pour configurer la fonction de téléchargement personnalisée * / var genericupload = function (dom) {var endPointUrl = $ (this) .attr ('endpoint'); var sid = $ (this) .attr ("sid"); var sid = $ (this) .attr ("sid"); var completfunc = 'uploadComplete'; // Configuration de la fonction complète personnalisée var cusComplete = $ (this) .attr ('complete'); if (cusComplete) {completfunc = cusComplete; } $ (this) .fileUpload ({url: endPointUrl, autoUplload: true, dataType: 'json', formdata: [{'sessionId': sid}], paramname: 'filedata',}). bind ('fileuploaddone', window [completefunc]);}; / ** * Les erreurs correspondantes avec l'entrée * seules les erreurs correspondantes peuvent être identifiées ici * / var avance_validate = fonction (erreurs, événement) {var conf = this.getConf (); // Erreurs de boucle $ .each (erreurs, fonction (index, error) {// ajouter la classe d'erreur dans l'entrée dom element var input = error.input; input.addclass (conf.ErrorClass); // Get Greath to the Error Container var msg = input.data ("msg.el"); // Créer des données d'erreur si le message d'erreur est présent, et ajouter une classe d'erreur pour l'entrée // "msg. {// msg = $ (conf. 'Hidden'}). Rechercher ("Span"). Supprime (); msg.parent (). width ()) {msg.add (msg.find ("span"); var avance_inputs = fonction (entrées) {var conf = this.getConf (); entrées.RemoveClass (conf.ErrorClass) .Each (function () {var msg = $ (this) .data ("msg.el"); if (msg) {msg.hide (); msg.parent (). reposerclass ("colerror");}}); if ($ (". colerror"). size () == 0) {var form = $ (this); var errhint = form.find (". FormError"). First (); if (errHint.size () == 0) {errHint = $ ("# pageError"); errHint.Text (''). Hide (); }}}; / ** * Lorsque le nom de reflom est contenu pour être sélectionné * / 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 ("vérifié", false); }} var refClass = check.attr ('refclass'); if (RefClass) {if (check.prop ("checked")) {$ ("input." + refClass) .prop ("checked", true); } else {$ ("input." + RefClass) .prop ("vérifié", false); }}}; / ** * Configuration de la boîte à cocher ReadOnly * / var readOnlyCheck = fonction (e) {e.PreventDefault (); return false;}; / ** * SELECT LIST DISABLE * / var readOnlySelect = function () {$ (this) .prop ("Disabled", true); }; $ (document) .ready (function () {$ (document) .ajaxStart (function () {// nettoyez l'erreur de niveau de page de demande ajax $ ("# pageerror"). tex $ .blockui ({message: "{__ ('l_processing')}"});}}); $ .unblockui ();} else {ajaxautounblock = true;}}} else {// change de mode par défaut de Url = '+ settings.url); ajaxsynchronized = true;}}); }}}); dollars. $ .tools.validator.fn ("[HIDDEN-ID]", validate_hidden_id); $ (". ajax_form_post"). Validator ({lang: '{lang_post); $ (". Ajax_form_Post"). // Validation du client pour l'ID caché $ (". Require_valida"). Validator ({Lang: '{Lang}', Effect: 'Advanced'}); $ (". BTN_NAV"). $ ("Button.btn_action"). Cliquez sur (ajax_action_button); $ (". CheckAll"). Cliquez sur (CheckAll); $ ("img [rel]"). "{__ ('e_email')}", ': numéro': "{__ ('e_decimal')}", ': url': "{__ ('e_url')}", '[max]': "{__ ('e_Max_Length '[requis]': "{__ ('e_not_empty')}",});});Ce qui précède est tout le contenu de cet article. J'espère qu'il sera utile pour tout le monde de maîtriser les opérations de traitement des formulaires JavaScript. Merci pour votre lecture.