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

本文实例处理各种表单, 以及链接,按钮的通用组件，教大家如何对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 default
var ajaxSynchronized = true;
//All ajax request will be unblock by default
var 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')}",
      });
});

以上就是本文的全部内容，希望对大家掌握javascript表单处理操作有所帮助，谢谢大家的阅读。