网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 javascript表单处理具体实现代码(表单、链接、按钮)
内容
    这篇文章主要介绍了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表单处理操作有所帮助，谢谢大家的阅读。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 1:53:28