MVC jQuery开发B/S系统：表单提交

$.fn.submitForm = function(args)   
{          
var url, id, callback, before;   
id = this.attr("id");          
if (typeof (args) == "string")   
{              
url = args;              
before = undefined;              
callback = undefined;          
}          
else   
{              
args = args || new Object();              
url = args.url || this.attr("action");              
if (typeof (args) == "function")   
{                  
callback = args;              
}              
else   
{                  
before = args.before;                  
callback = args.callback;              
}          
}          
//输入验证          
this.inputValidate();          
//form没有url 则是伪提交          
if (url == undefined || url == "")   
{              
$("#" + id).submit(function() {                  
if ($("#" + id).submitValidate()==false)                      
return false;                  
//验证成功就执行callback                  
callback();              
});          
}          
else   
{              
this.ajaxForm({                  
url: url,                  
beforeSubmit: function(a, f, o)   
{                      
//提交验证                      
if ($("#" + id).submitValidate() == false)                          
return false;                      
if (before != undefined && before() == false) {                          
return false;                      
}                      
o.dataType = "json";                  
},                  
success: function(data) {                      
if (data == "" || data == null)   
{                          
return false;                      
}                      
$("#myMsg").showMsg(data, callback);                    
return false;                  
}              
});          
}          
return this;      
}; 

public class JsonMessage  
{  
public int result { get; set; } //0错误 1正确 2提示 3警告  
public string title { get; set; }//Lightbox窗口的标题  
public string content { get; set; }//message的具体内容  
public string redirect { get; set; }//弹出后自动跳转的到哪里？  
public object callBackData { get; set; }//客户端需要的数据 比如 一个新增的id或整个model  
}  
 

(function($)   
{   
$.fn.showMsg = function(model, callback, fail)   
{   
var me = this;   
if (me.length == 0)   
{   
$("body").append("

Ajax消息的样式完全可以用CSS来做，包括div的定位都可以在css里写js代码来实现。

不知道有没有人能理解我这里的callback，我说一下他的用到的情况。 实际应用中我还有一个ajaxWin来实现弹窗，弹窗里的表单提交后一般需要关闭弹窗，然后更新一些数据(比如刷新列表)。这时就需要 submit后的callback动作。另外就是我目前还有使用到redirect这个属性。呵呵，我之前的系统需要大量的跳转处理,这些跳转也是无刷新的，有一个数组来记录访问的地址。可以实现后退和前进。

三：好了，Lightbox已经实现了，也能show出各种类型的信息了。
下面还剩下表单验证。 其实表单验证大有文章可做。我这也不能一一做到。目前只做了些简单的验证。以后会实现比较复杂的错误提示效果。其实这都是体力活，上面没要求我也懒的弄。

验证我采用的是给control一些自定义属性，然后再判断其值是否合法。

代码：

//输入验证   
$.fn.inputValidate = function() { $("input,select,textarea", this).each(function() {   
var me = $(this);   
var isnull = me.attr("isnull") || "1";   
var dvalue = me.attr("dvalue");   
me.focus(function() {   
if (this.value == "") $(this).inputRemove();   
});   
me.keyup(function() { if (this.value == "") $(this).inputRemove(); });   
//①非空检查 if (isnull == "0") {   
me.blur(function() {   
if ($(this).val() == "" || $(this).val() == dvalue) $(this).inputError("此项必须填写！");   
else $(this).inputRight();   
});   
}   
//②正则注册onchange事件   
var regexValue = me.attr("regex");   
if (regexValue != undefined) {   
var thisValue = me.val();   
me.blur(function() {   
var re = new RegExp(regexValue, "ig");   
if (this.value != "" && !re.test(this.value)) { me.inputError("格式不正确！");   
return result = false;   
} else me.inputRight();   
}); }   
//③最小长度   
var minLength = me.attr("minlength") || 0;   
if (minLength != undefined) minLength = parseInt(minLength);   
me.blur(function() {   
if (me.val() != null)   
if (me.val().length < minLength) {   
me.inputError("长度不能小于" + minLength); }   
});   
//④其他   
});   
};   
//提交验证   
$.fn.submitValidate = function() {   
var result = true; $("input:visible,select:visible,textarea:visible", this).each(function() {   
var me = $(this);   
var thisValue = "";   
if (me.attr("type") == "radio" || me.attr("type") == "checkbox") {   
thisValue = $("input[name='" + this.name + "']:checked").val();   
}   
else thisValue = me.val();   
//判断是否违法   
//① 是否必填 且不能为空或缺省值   
if (me.attr("isnull") == "0") {   
if (thisValue == "" || (thisValue != "" && thisValue == me.attr("dvalue"))) {   
me.inputError("此项必须填写！");   
return result = false;   
}   
else me.inputRight();   
}   
//② 是否符合格式 属性为 regex 正则   
if (thisValue != "") {   
var reValue = $(this).attr("regex");   
if (reValue != undefined) {   
re = new RegExp(reValue, "ig");   
if (!re.test(thisValue)) {   
me.inputError("格式不正确！");   
return result = false;   
}   
else me.inputRight();   
} } });   
return result;   
};   
$.fn.inputError = function(msg) {   
this.inputRemove();   
//this.focus();   
$("span", this.parent()).hide();   
this.parent().addClass("focus").append("" + (msg || '') + "");   
}   
$.fn.inputRight = function(msg) {   
this.inputRemove();   
//this.focus();   
$("span", this.parent()).hide();   
this.parent().addClass("focus").append("" + (msg || '') + "");   
} $.fn.inputRemove = function() {   
this.removeClass("focus");   
$(".right,.error", this.parent()).remove();   
$("span", this.parent()).show();   
}  
 

每一种方法，我们都应该从性能和发功效率上来考虑，要做到两者兼得是很不容易的。通过本文作者的分析，希望会对你有所帮助。