前言
使用$.fn.form.defaults重写默认值对象下载该插件翻译源码
form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效
源码
/**
* jQuery EasyUI 1.3.2
*
*翻译;qq 1364386878
*/
(function ($) {
//执行提交操作，该选项的参数是一个对象
function _submit(target, options) {
options = options || {};
var param = {};
if (options.onSubmit) {
if (options.onSubmit.call(target, param) == false) {
return;
}
}
var form = $(target);
if (options.url) {
form.attr("action", options.url);
}
var iframeid = "easyui_frame_" + (new Date().getTime());
var frame = $("<iframe id=" + iframeid + " name=" + iframeid + "></iframe>").attr("src",
window.ActiveXObject ? "javascript:false" : "about:blank").css(
{ position: "absolute", top: -1000, left: -1000 });
var t = form.attr("target"),
a = form.attr("action");
form.attr("target", iframeid);
var _8 = $();
try {
frame.appendTo("body");
frame.bind("load", cb);
for (var n in param) {
var f = $("<input type=\"hidden\" name=\"" + n + "\">").val(param[n]).appendTo(form);
_8 = _8.add(f);
}
form[0].submit();
}
finally {
form.attr("action", a);
t ? form.attr("target", t) : form.removeAttr("target");
_8.remove();
}
var checkCount = 10;
function cb() {
frame.unbind();
var body = $("#" + iframeid).contents().find("body");
var data = body.html();
if (data == "") {
if (--checkCount) {
setTimeout(cb, 100);
return;
}
return;
}
var ta = body.find(">textarea");
if (ta.length) {
data = ta.val();
} else {
var pre = body.find(">pre");
if (pre.length) {
data = pre.html();
}
}
if (options.success) {
options.success(data);
}
setTimeout(function () {
frame.unbind();
frame.remove();
}, 100);
};
};
//读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录
function _load(target, data) {
if (!$.data(target, "form")) {
$.data(target, "form", {
options: $.extend({},
$.fn.form.defaults)
});
}
var options = $.data(target, "form").options;
if (typeof data == "string") {
var param = {};
if (options.onBeforeLoad.call(target, param) == false) {
return;
}
$.ajax({
url: data,
data: param,
dataType: "json",
success: function (data) {
_load2(data);
},
error: function () {
options.onLoadError.apply(target, arguments);
}
});
} else {
_load2(data);
}
function _load2(data) {
var form = $(target);
for (var name in data) {
var val = data[name];
var rr = setChecked(name, val);
if (!rr.length) {
var f = form.find("input[numberboxName=\"" + name + "\"]");
if (f.length) {
f.numberbox("setValue", val);
} else {
$("input[name=\"" + name + "\"]", form).val(val);
$("textarea[name=\"" + name + "\"]", form).val(val);
$("select[name=\"" + name + "\"]", form).val(val);
}
}
setValue(name, val);
}
options.onLoadSuccess.call(target, data);
_validate(target);
};
//设置选中
function setChecked(name, val) {
var form = $(target);
var rr = $("input[name=\"" + name + "\"][type=radio], input[name=\"" + name + "\"][type=checkbox]", form);
$.fn.prop ? rr.prop("checked", false) : rr.attr("checked", false);
rr.each(function () {
var f = $(this);
if (f.val() == String(val)) {
$.fn.prop ? f.prop("checked", true) : f.attr("checked", true);
}
});
return rr;
};
//设置值
function setValue(name, val) {
var form = $(target);
var types = ["combobox", "combotree", "combogrid", "datetimebox", "datebox", "combo"];
var c = form.find("[comboName=\"" + name + "\"]");
if (c.length) {
for (var i = 0; i < types.length; i++) {
var type = types[i];
if (c.hasClass(type + "-f")) {
if (c[type]("options").multiple) {
c[type]("setValues", val);
} else {
c[type]("setValue", val);
}
return;
}
}
}
};
};
//清除表单数据
function _clear(target) {
$("input,select,textarea", target).each(function () {
var t = this.type,
tag = this.tagName.toLowerCase();
if (t == "text" || t == "hidden" || t == "password" || tag == "textarea") {
this.value = "";
} else {
if (t == "file") {
var file = $(this);
file.after(file.clone().val(""));
file.remove();
} else {
if (t == "checkbox" || t == "radio") {
this.checked = false;
} else {
if (tag == "select") {
this.selectedIndex = -1;
}
}
}
}
});
if ($.fn.combo) { $(".combo-f", target).combo("clear");
}
if ($.fn.combobox) {
$(".combobox-f", target).combobox("clear");
}
if ($.fn.combotree) {
$(".combotree-f", target).combotree("clear");
}
if ($.fn.combogrid) {
$(".combogrid-f", target).combogrid("clear");
}
_validate(target);
};
//重置表单数据
function _reset(target) {
target.reset();
var t = $(target); if ($.fn.combo) {
t.find(".combo-f").combo("reset");
}
if ($.fn.combobox) {
t.find(".combobox-f").combobox("reset");
}
if ($.fn.combotree) {
t.find(".combotree-f").combotree("reset");
}
if ($.fn.combogrid) {
t.find(".combogrid-f").combogrid("reset");
}
if ($.fn.spinner) {
t.find(".spinner-f").spinner("reset");
}
if ($.fn.timespinner) {
t.find(".timespinner-f").timespinner("reset");
}
if ($.fn.numberbox) {
t.find(".numberbox-f").numberbox("reset");
}
if ($.fn.numberspinner) {
t.find(".numberspinner-f").numberspinner("reset");
}
_validate(target);
};
//设置表单
function setForm(target) {
var options = $.data(target, "form").options;
var form = $(target);
form.unbind(".form").bind("submit.form", function () {
setTimeout(function () {
_submit(target, options);
}, 0);
return false;
});
};
//做表单字段验证，当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件
function _validate(target) {
if ($.fn.validatebox) {
var t = $(target);
t.find(".validatebox-text:not(:disabled)").validatebox("validate");
var valid = t.find(".validatebox-invalid");
valid.filter(":not(:disabled):first").focus();
return valid.length == 0;
}
return true;
};
//实例化form
$.fn.form = function (options, param) {
if (typeof options == "string") {
return $.fn.form.methods[options](this, param);
}
options = options || {};
return this.each(function () {
if (!$.data(this, "form")) {
$.data(this, "form", {
options: $.extend({},
$.fn.form.defaults, options)
});
}
setForm(this);
});
};
//方法
$.fn.form.methods = {
//执行提交操作，该选项的参数是一个对象
submit: function (jq, param) {
return jq.each(function () {
_submit(this, $.extend({}, $.fn.form.defaults, param || {}));
});
},
//读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录
load: function (jq, data) {
return jq.each(function () {
_load(this, data);
});
},
//清除表单数据
clear: function (jq) {
return jq.each(function () {
_clear(this);
});
},
//重置表单数据
reset: function (jq) {
return jq.each(function () {
_reset(this);
});
},
//表单字段验证，当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件
validate: function (jq) {
return _validate(jq[0]);
}
}; //form默认属性+事件
$.fn.form.defaults = {
url: null,//提交表单动作的URL地址
//在提交之前触发，返回false可以终止提交
onSubmit: function (param) {
return $(this).form("validate");
},
//在表单提交成功以后触发
success: function (data) {
},
//在请求加载数据之前触发。返回false可以停止该动作
onBeforeLoad: function (_30) {
},
//在表单数据加载完成后触发
onLoadSuccess: function (_31) {
},
//在表单数据加载出现错误的时候触发
onLoadError: function () {
}
};
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Form - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.validatebox.js"></script>
<script src="../../plugins2/jquery.linkbutton.js"></script>
<script src="../../plugins2/jquery.panel.js"></script>
<script src="../../plugins2/jquery.form.js"></script>
</head>
<body>
<h2>Basic Form</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Fill the form and submit it.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-panel" title="New Topic" style="width:400px">
<div style="padding:10px 0 10px 60px">
<form id="ff" method="post">
<table>
<tr>
<td>Name:</td>
<td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>Subject:</td>
<td><input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
</tr>
<tr>
<td>Message:</td>
<td><textarea name="message" style="height:60px;"></textarea></td>
</tr>
<tr>
<td>Language:</td>
<td>
<select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
</td>
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
</div>
</div>
<script>
function submitForm(){
$('#ff').form('submit');
}
function clearForm(){
$('#ff').form('clear');
}
</script>
</body>
</html>
插件效果
