[MVC]MVC+Jquery开发B/S系统：③表单提交-Mikel

说起表单提交，是无人不知，无人不晓哇。今天我们就谈如何用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、如何验证

//注册form的ajaxForm 此方法需要调用jQuery.ajaxwindow.js的方法
//一般form里有action，所以参数有可能只需要传一个callback，
//如果一个表单有多个提交按钮，那么则需要提交不同的url
// 这个方法是用来注册form提交，如果有多个提交按钮时，最好默认注册一个，否则验证方法就不起到作用
$.fn.submitForm = function(args) {
    var url, id, callback, before;
    id = this.attr("id");
    if (typeof (args) == "string") {//只传一个url
        url = args;
        before = undefined;
        callback = undefined;
    }
    else {
        args = args || new Object();
        url = args.url || this.attr("action");
        if (typeof (args) == "function") {//只传一个callback
            callback = args;
        }
        else {
            before = args.before;
            callback = args.callback;
        }
    }
    //输入验证
    this.inputValidate();//这是我们需要实现的一个“输入时的验证”，
    this.ajaxForm({ //这里调用jQuery.form.js表单注册方法。
        url: url,
        beforeSubmit: function(a, f, o) {//提交前的处理
            //提交验证
            if ($("#" + id).submitValidate() == false)//这里我们需要实现的“提交时的验证”。
                return false;
            if (before != undefined && before() == false) {
                return false;
            }
            o.dataType = "json";//指定返回的数据为json格式。
        },
        success: function(data) {//提交后反馈信息处理
            if (data == "" || data == null) {
                return false;
            }
            var msg = new ajaxMsg(data);//这个ajaxMsg便是我们需要实现的Lightbox
            msg.show(callback);//show这个反馈的结果。
            return false;
        }
    });
    return this;
}

上面的方法很简单，就是form插件的使用，还有几个我们需要实现的方法。(inputValidate,submitValiedate,ajaxMsg)

既然是ajax提交，我们则需要给客户端一个反馈信息，然后用Lightbox呈现。

一：我们定义一个JsonMessage类

    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

MVC返回Json(jsonmsg1)，客户端的callback便可以得到这个对象的json格式。

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

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

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

下面是他的css

Code

三：好了，Lightbox已经实现了，也能show出各种类型的信息了。

下面还剩下表单验证。其实表单验证大有文章可做。我这也不能一一做到。目前只做了些简单的验证。以后会实现比较复杂的错误提示效果。其实这都是体力活，上面没要求我也懒的弄-。-

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

//输入验证
$.fn.inputValidate = function() {
    $("input,select,textarea", this).each(function() {
        var isnull = $(this).attr("isnull");
        var regexValue = $(this).attr("regex");
        var defautValue = $(this).attr("dvalue");
        //            //①非空注册焦点事件
        //            if (isnull == "0") {
        //                $(this).blur(function() {
        //                    if (this.value == "" || this.value == defautValue)
        //                        $(this).addClass("focus").focus();
        //                    else
        //                        $(this).removeClass("focus");
        //                });
        //            }

        //②正则注册onchange事件
        if (regexValue != undefined) {
            var thisValue = this.value;
            //检查类型绑定不同事件
            if ($(this).attr("type") == "text") {
                $(this).bind("keyup", function() {
                    if ($(this).val() == "")
                        return;
                    var re = new RegExp(regexValue, "ig");
                    var newValue = this.value;
                    if (!re.test(newValue)) {
                        $(this).val(thisValue).focus();
                    }
                    else {
                        thisValue = newValue;
                        $(this).val(newValue);
                    }
                });
            }
        }
        function checkRegex(value, re) {
        }
        //③最小长度

        //④其他

    });
}
//提交验证
$.fn.submitValidate = function() {
    var result = true;
    $("input:visible,select:visible,textarea:visible", this).each(function() {
        result = true;
        var thisValue = "";
        if ($(this).attr("type") == "radio" || $(this).attr("type") == "checkbox") {
            thisValue = $("input[name='" + this.name + "']:checked").val();
        }
        else
            thisValue = $(this).val();
        //判断是否违法

        if ($(this).attr("isnull") == "0") {//① 是否必填且不能为空或缺省值
            result = (thisValue != "" && thisValue != $(this).attr("dvalue"));
        }
        else if (thisValue != "") {//② 是否符合格式属性为 regex 正则
            var reValue = $(this).attr("regex");
            if (reValue != undefined) {
                re = new RegExp(reValue, "ig");
                result = re.test(thisValue);
            }
        }
        //        //③ 是否符合最大长度
        //        var maxLength = $(this).attr("maxLen");
        //        if (maxLength != undefined && maxLength != "-1") {
        //            if (thisValue.length > parseInt(maxLength))
        //                result = false;
        //        }
        //        //④ 是否符合最小长度

        //返回false

        if (result == false) {
            $(this).addClass("focus").focus().blur(function() {
                if (this.value != "" && this.value != $(this).attr("dvalue")) {
                    $(this).removeClass("focus");
                }
            });
            //alert($(this).attr("name"));
            return false;
        }
    });
    return result;
}

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

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

JQuery数据绑定：①列表绑定（续）

JQuery数据绑定：①列表绑定（三）

MVC+JQuery开发B/S系统：②表单绑定