MVC+jQuery开发B/S系统③:表单提交

今天我们就谈如何用JQuery+MVC来处理表单的提交。
想达到的效果:
1、提交前的表单验证
2、表单验证
3、提交后的反馈信息
ok,先说一下工作的原理。
前台<form action='xxx.aspx' method='post'></form>,action指定了接受表单的处理页面。method这里我们只说post
如果用ajax提交表单,自然xxx.aspx便是请求的url。ajax请求后的callback便是响应表单的提交结果(错误、成功),我们提交的反馈信息用一个 浮层(lightbox)来表示。 不至于用 alert(""); 这样铛铛铛很囧。
我们引入一个Jquery的插件http://www.malsup.com/jquery/form/#api 这是一个略有名气的插件,方便易用。
关于其用法,大家可以搜索下。
那么我们需要做的就是
1、jquery.form.js的使用 
2、lightbox的实现 
3、如何验证

代码
$.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;
};

 



上面的方法很简单,就是form插件的使用,还有几个我们需要实现的方法。(inputValidate,submitValiedate,ajaxMsg)
既然是ajax提交,我们则需要给客户端一个反馈信息,然后用Lightbox呈现。

一:我们定义一个JsonMessage类

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

MVC返回Json(jsonmsg1),客户端的callback便可以得到这个对象的json格式。
(注意:如果是附件的表单提交,则不能识别JsonResult格式。具体我还没有研究怎么回事,这种情况只能response一个json字符串,可以用System.Web.Script.Serialization.JavaScriptSerializer来序列化对象,也很方便。)

二:我们写一个ajaxMsg来实现lightbox,这是我自己写的Lightbox,比较简陋,如果不喜欢,也可以用一些知名的插件。

代码
(function($) {
$.fn.showMsg
= function(model, callback, fail) {
var me = this;
if (me.length == 0) {
$(
"body").append("<div id='" + me.selector.replace("#", "") + "'></div>");
$(me.selector).showMsg(model, callback);
return;
}

if (model == undefined)
return;

model.content
= model.result == 1 && model.content == undefined ? "操作成功!" : model.content;
me.html(model.content);
me.removeClass().addClass(
"message_" + model.result).show(100);
if (model.result1 == 1 && fail != undefined) {
fail(model);
}

if (model.result == 1 && callback != undefined) {
callback(model);
}
setTimeout(
function() {
if (me.css("display") != "none") {
me.hide(
100);
}
},
3000);
return me;
}
})(jQuery);

 

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("<span class='error'>" + (msg || '') + "</span>");
}
$.fn.inputRight
= function(msg) {
this.inputRemove();
//this.focus();
$("span", this.parent()).hide();
this.parent().addClass("focus").append("<span class='right'>" + (msg || '') + "</span>");
}
$.fn.inputRemove
= function() {
this.removeClass("focus");
$(
".right,.error", this.parent()).remove();
$(
"span", this.parent()).show();
}

 



这些都是比较简单的东西,拿出来献丑了。 下面是我之前写的关于绑定的,有兴趣的可以看看。

MVC+Jquery开发B/S系统:①列表绑定

posted @ 2009-09-14 11:35  君之蘭  阅读(4842)  评论(7编辑  收藏  举报