這篇文章主要介紹了javascript表單處理具體實(shí)現(xiàn)代碼，包括各種表單、鏈接、按鈕控件介紹，感興趣的朋友可以參考一下
本文實(shí)例處理各種表單, 以及鏈接,按鈕的通用組件，教大家如何對(duì)javascript表單處理進(jìn)行操作，具體內(nèi)容如下
/**
* 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')}",
});
});
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家掌握javascript表單處理操作有所幫助，謝謝大家的閱讀。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試