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

本文实例处理各种表单, 以及链接,按钮的通用组件，教大家如何对javascript表单处理进行操作，具体内容如下

 

"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 }
   );
 }
};
 

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;
};
 

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');
 }
};
 

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;
};
 

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;
};
 
 

var time_picker = function(){
 var ipt = $(this);
 var config = { };
 
 var step = ipt.attr("step");
 if( step ){
  config.step = step;
 }
 
 ipt.timePicker( config );
 return true;
};
 

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
      }
     }
     
     form.data("validator").invalidate(json.data);
    } },'json');
    e.preventDefault();
 }else{
  errHint.html("{Html::text(__('E_FORM'))}").show();
 }
};
 

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];
};
 

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/i')){
  if(!confirm(l.attr('/confirm/i'))){
   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;
};
 

var btn_nav = function(){
 var input = $(this);
 var href = input.attr("href");
 if(href){
  window.location = href;
 }else{
  alert("Href not set");
 }
 return false;
};
 

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;
};
 
 
 

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');
};
 
 

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');
 
 $("").append("{__('L_SELECT')}").appendTo(_select);
 for(var _kid in _lovchildren){
  var _lov = _lovchildren[_kid]['lov'];
  $("").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;
};
 

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("");
 }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 = $('').data('lovtree',_c_lovtree).
   data('rowvalue',_rowvalue).
   attr('hidden-id',_hidden_id).attr('un',_un).
   attr('name',_un+'_'+_k);
  $("").append("{__('L_SELECT')}").appendTo(_c_select);
  //Building the option list
  for(var _kid in _c_lovtree.c){
   var _lov = _c_lovtree.c[_kid]['lov'];
   $("").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;
};
 

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();
};
 

//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();
 }
};
 

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]);
};
 

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) { 
     $("").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();
  }
 }
};
 

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);
  }
 }
};
 

var readonlyCheck = function(e){
 e.preventDefault(); 
 return false;
};
 

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表单处理操作有所帮助，谢谢大家的阅读。



转载请注明：文章转载自 www.mshxw.com
本文地址：https://www.mshxw.com/it/97237.html


   上一篇  JavaScript编写检测用户所使用的浏览器的代码示例
 
   下一篇  jquery实现下拉框功能效果
  






JavaScript相关栏目本月热门文章

  
1【Linux驱动开发】设备树详解（二）设备树语法详解
  
2别跟客户扯细节
  
3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
  
4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
  
5【分页】常见两种SpringBoot项目中分页技巧
  
6一文带你搞懂OAuth2.0
  
7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
  
8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
  
9JavaSE - 封装、static成员和内部类
  
10树莓派mjpg-streamer实现监控及拍照功能调试
  
11用c++写一个蓝屏代码
  
12从JDK8源码中看ArrayList和LinkedList的区别
  
13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
  
14在openwrt使用C语言增加ubus接口（包含C uci操作）
  
15Spring 解决循环依赖
  
16SpringMVC——基于MVC架构的Spring框架
  
17Andy‘s First Dictionary C++ STL set应用
  
18动态内存管理
  
19我的创作纪念日
  
20Docker自定义镜像-Dockerfile







热门相关搜索



路由器设置
木托盘
宝塔面板
儿童python教程
心情低落
朋友圈
vim
双一流学科
专升本
我的学校
日记学校
西点培训学校
汽修学校
情书
化妆学校
塔沟武校
异形模板
西南大学排名
最精辟人生短句
6步教你追回被骗的钱
南昌大学排名
清朝十二帝
北京印刷学院排名
北方工业大学排名
北京航空航天大学排名
首都经济贸易大学排名
中国传媒大学排名
首都师范大学排名
中国地质大学(北京)排名
北京信息科技大学排名
中央民族大学排名
北京舞蹈学院排名
北京电影学院排名
中国戏曲学院排名
河北政法职业学院排名
河北经贸大学排名
天津中德应用技术大学排名
天津医学高等专科学校排名
天津美术学院排名
天津音乐学院排名
天津工业大学排名
北京工业大学耿丹学院排名
北京警察学院排名
天津科技大学排名
北京邮电大学(宏福校区)排名
北京网络职业学院排名
北京大学医学部排名
河北科技大学排名
河北地质大学排名
河北体育学院排名







学习工具
代数计算器
三角函数
解析几何
立体几何


知识解答
教育知识
百科知识
生活知识
常识知识


写作必备
作文大全
作文素材
句子大全

实用范文


关于我们
关于我们
联系我们
网站地图


 
名师互学网交流群


名师互学网客服





名师互学网 版权所有 (c)2021-2022      ICP备案号：晋ICP备2021003244-6号
 






关于我们
文章归档
网站地图
联系我们
版权所有 (c)2021-2022 MSHXW.COM
ICP备案号：晋ICP备2021003244-6号