这篇文章主要介绍了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表单处理操作有所帮助，谢谢大家的阅读。