javascript表单处理具体实现代码(表单、链接、按钮)

/** * Generic Form processing js * @author Anthony.chen */ /** * Push button action [btn_action]data into form * If there is prescript , run the pre script */"use strict";//All ajax request are synchronized by defaultvar ajaxSynchronized = true;//All ajax request will be unblock by defaultvar ajaxAutoUnblock = true; var ajax_action_button = function (e){ var btn = $(this); //Add 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',value:btn_action }   ); }}; /** * Update the extra form data in FormElement with Form element, Key and 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); return true;}; /** * Bool Checkbox is special checkbox which needs to keep UNCHECK value  * And post with ajax form ,the form is in the parent */var bool_checkbox = function(){ var ipt = $(this); 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 the spin number */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 the date input */var date_input = function(){ var ipt = $(this); var config = {  offset:[4,0],  selectors:true,  lang: '{lang}',  firstDay : 1,  format: 'yyyy-mm-dd', };   var min = ipt.attr('min'); if( min ){  config.min = min; }  var min = ipt.attr('min'); if( min ){  config.min = min; }  ipt.dateinput(config); return true;};  /** * Init the 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;}; /** * Generic Ajax Form post function * If btn_action is set, then add data into form * if returi is set, redirect to returi * if reload is set, reload  * else Show block message * * the form will be validated. */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();  //Cleanup the pageError if(!e.isDefaultPrevented()){  //Hide 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);  //Add extra Data  var post_data;  if(post_data = form.data('post_data')){   for (var k in post_data ){    //if post_data[k] is array,need more to do    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 Add suppport to allow save and stay     if(btn_action =='reqonly'){      if(returi = form.attr('returi')){       $(window).data('blockUI.returi',returi);       ajaxAutoUnblock = false;      }      $.blockUI({ message:retData, css:{ cursor:'pointer',padding:'4px',border:'3px solid #CC0000',}, overlayCSS:{ cursor:'pointer' } });      $(".blockUI").addClass("blockwarn");     } //if there is returi set, then return to uri     else if(returi = form.attr('returi')){      window.location = returi;     //Else if reload is set, then will be reload     }else if(form.attr('reload')!=undefined){      window.location.reload();     }else{      $.blockUI({ message:retData });      $.unblockUI();     }    }    else{     if(typeof (json.data.errmsg) == 'string'){      errHint.html(json.data).show();      //$.blockUI({ message:json.data, css:{ cursor:'pointer',padding:'4px',border:'3px solid #CC0000',}, overlayCSS:{ cursor:'pointer' } });      //$(".blockUI").addClass("blockwarn");     }else{      errHint.html("{Html::text(__('E_FORM'))}").show();      for(var p in json.data){       var msg = json.data[p];       //Process hidden value,None hidden input should has refid refered to hidden value       //Showing the Server message to ref        var ele = form.find("[type=hidden][name="+p+"]");       if(ele.length){        delete json.data.p;        refid = ele.attr("id");        refname = form.find("[hidden-id="+refid+"]").attr("name");        json.data[refname]=+msg;       }        //Muti checkbox        var ele = form.find("[type=checkbox][name='"+p+"[]']");       if(ele.length){        delete json.data.p;        refname = p+'[]';        json.data[refname]=+msg;       }       //@END      }     }     /*      * Checking the hidden values       */     form.data("validator").invalidate(json.data);    } },'json');    e.preventDefault(); }else{  errHint.html("{Html::text(__('E_FORM'))}").show(); }}; /*** * Reset the input */var ajax_post_form_hidden = function(){   var form = $(this);   form.find("[hidden-id]").each(function(){   //Clear the message of Reference    var input = $(this);   var refid = input.attr("hidden-id");   var field = $("#" + refid + "");    //Setup the clear of Errmsg   //Monitor the change event on ID element, remove error message    //of Real input   field.change(function(){     //Hidden input    var hinput = $(this);    //real input    var rinput = $("[hidden-id="+hinput.attr("id")+"]").first();    form.data('validator').reset(rinput)    });   });  }; 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().filter("[name=" + name + "]"); return input.val() == field.val() ? true : [name];}; /** * Ajax request through link * If confirm is set, confirm before send request * Support returi and reload * 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(); } //If the confirm message is set, then should be confirmed from client if(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 = 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 success to execute funtion for each    var successFunc = l.attr('success');    if(successFunc){     l.each(window[successFunc]);    }     if(json.data){     retData = json.data;     }    //IF Require warning before    if( l.attr('value') == 'reqonly'){     alert(retData);    }else if(returi = l.attr('returi')){     window.location = returi;    }    else if(l.attr('reload')!=undefined){     window.location.reload();    }    else{     $.blockUI({ message:retData, css:{ cursor:'pointer',padding:'4px',border:'3px solid #CC0000',}, overlayCSS:{ cursor:'pointer' } });     $(".blockUI").addClass("blockwarn");    }   }else{    //$.unblockUI();    //Only could support Text errmsg    if(hint){     errHint.text(json.data).show();    }else{     alert(json.data);    }   }},'json'); return false;}; /** * Supporting the button base navigation * Only jump to new 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;}; /** * Support button base Ajax get method request * support returi and reload */var btn_req = function(){ var input = $(this); var href = input.attr("href");  var hint = input.attr('hint'); 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;   }   else if(input.attr("reload")!=undefined){    window.location.reload();   }else{     var retData = "{__('L_PROCESSED')}!";     if(json.data){      retData = json.data;      }     $.blockUI({ message:retData,css:{ cursor:'pointer' },overlayCSS:{ cursor:'pointer' } });    }   }else{    if(hint){     $.unblockUI();     errHint.html(json.data.errmsg).show();    }else{     $.blockUI({ message:json.data.errmsg, css:{ cursor:'pointer',padding:'4px',border:'3px solid #CC0000',}, overlayCSS:{ cursor:'pointer' } });     $(".blockUI").addClass("blockwarn");    }   }   },'json'); return false;};   /** * Generic Ajax Checkbox * The default action is prevented and submit real request through 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;   }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); for(var _kid in _lovchildren){  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);  //Select the list if(_rowvalue){  _select.find("[value="+_rowvalue[0]+"]").prop("selected",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');  //Remove all the subsequent  var _lovtree = _select.data('lovtree'); var _rowvalue = _select.data('rowvalue');  _select.nextAll().remove();  //This is value of Current Select 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');   //Getting Children list  if(_lovtree.c[_k].c == undefined){   return false;  }  var _c_lovtree = _lovtree.c[_k];   var _c_select = $('<SELECT>').data('lovtree',_c_lovtree).   data('rowvalue',_rowvalue).   attr('hidden-id',_hidden_id).attr('un',_un).   attr('name',_un+'_'+_k);  $("<OPTION>").append("{__('L_SELECT')}").appendTo(_c_select);  //Building the option list  for(var _kid in _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);   //Insert after   _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');  return 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=no,height="+height+",width="+width+",resizable=yes,toolbar=no,location=no,status=no"); return false;}; /** * Lookup new value for hidden value */var parent_lookup = function(){ var lookup = $(this); var pid = opener.$("#" + lookup.attr('pid')); if(!pid.length){  alert(lookup.attr('pid')+ " not found");  return false; } var pname = opener.$( "#" + lookup.attr('pname')); if(!pname.length){  alert(lookup.attr('pname')+ " not found");  return false; }  var aft_script; //Run current after script if(aft_script = lookup.attr('aft_script')){  window.eval(aft_script); }  pid.val($(this).attr("refid"));  //Only operation from opener could trigger change 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) {  //To be replaced by jquery uploader var _fileUpload = $(this); //console.log(_fileUpload); //console.log(data.result); if(_fileUpload.attr('reload')!=undefined){  window.location.reload(); }}; /** * File upload function ,the following attribute to control action of upload * 'endpoint' as upload url * 'sid' as session id * 'complete' optional to configure the custom upload complete function */var genericUpload = function(dom){ var endpointurl = $(this).attr('endpoint'); var sid = $(this).attr("sid"); var completeFunc = 'uploadComplete'; //Setup custome complete function var cusComplete = $(this).attr('complete'); if(cusComplete){  completeFunc = cusComplete; }  $(this).fileupload({  url: endpointurl,  autoUpload:true,  dataType:'json',  formData: [{ 'sessionid': sid }],  paramName: 'Filedata', }).bind('fileuploaddone',window[completeFunc]);}; /** * Matched errors with input  * Only matched errors could be identified here */var advance_validate = function(errors, event) { var conf = this.getConf(); // loop errors $.each(errors, function(index, error) {   // add error class into input Dom element   var input = error.input;         input.addClass(conf.errorClass);    // get handle to the error container   var msg = input.data("msg.el");     // create Error data if not present, and add error class for input   // "msg.el" data is linked to error message Dom Element   if (!msg) {    //msg = $(conf.message).addClass(conf.messageClass).insertAfter(input);   msg = $(conf.message).addClass(conf.messageClass).appendTo(input.parent());   input.data("msg.el", msg);   }     // clear the container    msg.css({visibility: 'hidden'}).find("span").remove();    // populate messages   $.each(error.messages, function(i, m) {      $("<span/>").html(m).appendTo(msg);        });    // make sure the width is not full body width so it can be positioned correctly   if (msg.outerWidth() == msg.parent().width()) {    msg.add(msg.find("span"));     }     //insert into correct position (relative to the field)    msg.css({ visibility: 'visible'}) .fadeIn(conf.speed);     msg.parent().addClass("colError"); });}; 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();  } }}; /** * When refname is contained to be selected */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);  } }}; /** * Setup readonly checkbox  */var readonlyCheck = function(e){ e.preventDefault();  return false;}; /** * Select List disable */var readonlySelect = function(){ $(this).prop("disabled", true); };  $(document).ready(function() {  $(document).ajaxStart(function(){   //Clean up the Ajax request Page Level Error   $("#pageError").text('').hide();   //Clean up teh Form Error   $(".formError").text('').hide();   //Blocking all ajax processing   if(ajaxSynchronized){    $.blockUI({ message:"{__('L_PROCESSING')}" });    }   });  $(document).ajaxStop(function(){   if(ajaxSynchronized){    if($(window).data('blockUI.isBlocked') == 1){     if(ajaxAutoUnblock){      $.unblockUI();     }else{      ajaxAutoUnblock = true;     }    }   }else{//Change back to default Synchronized mode from Async    ajaxAutoUnblock = true;    ajaxSynchronized = true;   }   });  $(document).ajaxError(function(event, request, settings){   alert('Ajax Request Error! URL='+settings.url);   if(ajaxSynchronized){    if($(window).data('blockUI.isBlocked') == 1){     if(ajaxAutoUnblock){      $.unblockUI();     }else{      ajaxAutoUnblock = true;     }    }   }else{    ajaxAutoUnblock = true;    ajaxSynchronized = true;   }   });   //Force unblockUI  $(document).click(function(){    if($(window).data('blockUI.isBlocked') == 1){     $.unblockUI();     var returi = $(window).data('blockUI.returi');     if(returi){      window.location = returi;     }    }});   $.tools.validator.addEffect("advanced", advance_validate,advance_inputs);  $.tools.validator.fn("[data-equals]", { "{lang}":"{__('E_NOTEQUAL')}" }, data_equals_validate );  $.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);  $(".spin_number").each(spin_number);  $(".date_input").each(date_input);  $(".time_picker").each(time_picker);   $('.ajax_link_req').click(ajax_link_req);  //Client validation for the hidden ID   $(".require_validate").validator({ lang:'{lang}',effect:'advanced' });   $(".btn_nav").click( btn_nav );  $(".btn_req").click( btn_req );  $("button.btn_action").click(ajax_action_button);  $(".lookup_new").click(lookup_new);  $(".parent_lookup").click(parent_lookup);  $(".ajax_checkbox").click(ajax_checkbox);  $(".bool_checkbox").click(bool_checkbox);  $(".checkall").click(checkall);  $("img[rel]").overlay();  $("input[tip]").tooltip({ position:"center right"});   //At last we will do localize  $.tools.validator.localize("{lang}", {   '*'  : "{__('E_ALL')}",   ':email' : "{__('E_EMAIL')}",   ':number' : "{__('E_DECIMAL')}",   ':url'  : "{__('E_URL')}",   '[max]'  : "{__('E_MAX_LENGTH')}",   '[min]'  : "{__('E_MIN_LENGTH')}",   '[required]' : "{__('E_NOT_EMPTY')}",   });});