开发MVC+jQuery下B/S系统的表单提交-jquery 提交表单

我们这里将说到如果在ajax提交表单，但这里将介绍MVC+jQuery的处理方法。需要实现的是1、jquery.form.js的使用、2、lightbox的实现、3、如何验证。

说起表单提交，是无人不知，无人不晓哇。今天我们就谈如何用MVC+jQuery来处理表单的提交。

想达到的效果：

1、提交前的表单验证

2、表单验证

3、提交后的反馈信息

ok，先说一下工作的原理。

前台，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、如何验证

Code

//注册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类

Code  
    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，比较简陋，如果不喜欢，也可以用一些知名的插件。

Code  
var ajaxMsg = function(msg) {  
    if (msg != undefined) {  
        //提示框的属性  
        this.result = msg.result || 0; //0错误 1正确 2提示 3警告  
        this.title = msg.title || ""; //提示框的标题  
        this.redirect = msg.redirect || null;  
        this.content = msg.content || ""; //窗口的内容 通过后台json数据获得  
        this.callBackData = msg.callBackData;  
    }  
}  
//创建一个win  
ajaxMsg.prototype.open = function(parentElement) {  
    //创建Mask遮罩层  
    $("body").append("  
 
");  
    //设置Mask高度  
    var bodyheight = document.body.offsetHeight;  
    var clientheight = document.documentElement.clientHeight;  
    if (bodyheight > clientheight)  
        clientheight = bodyheight;  
    else 
        bodyheight = clientheight;  
    $("#MsgMask").height(bodyheight + "px");  
 
    //创建窗口  
    $("body").append("  
 
");  
    var frameId = "#MsgFrame";  
 
    //不同的style 不同的frame  frame由mask来控制  
    switch (this.result) {  
        case 0:  
            $(frameId).addClass("msg_error");  
            break;  
        case 1:  
            $(frameId).addClass("msg_right");  
            break;  
        case 2:  
            $(frameId).addClass("msg_tips");  
            break;  
        case 3:  
            $(frameId).addClass("msg_warning");  
            break;  
        default:  
            $(frameId).addClass("msg_default");  
            break;  
    }  
    //创建内容div  
    $(frameId).append("  
 
" + this.content + " 
");  
 
    //设置Mask的宽高  
    if (this.width > 0)  
        $(frameId).width(this.width);  
    if (this.height > 0)  
        $(frameId).height(this.height);  
 
    //设置窗口的定位  
    var frame_width = $(frameId).width();  
    var frame_height = $(frameId).height();  
    var css_top = parseInt((document.documentElement.clientHeight - frame_height) / 2) - 100;  
    if (css_top <= 0)  
        css_top = 80;  
    var css_left = (document.documentElement.clientWidth - frame_width) / 2;  
    var css_right = css_left;  
    $(frameId).css("top", css_top + "px").css("left", css_left + "px").css("right", css_right + "px");  
    hideSelects();  
}  
 
//显示方式  
ajaxMsg.prototype.show = function(callBack) {  
    if (this.result == undefined) {  
        if (callBack != undefined)  
            callBack(this.callBackData);  
        return;  
    }  
    if (this.result == 1) {  
        if (this.content != undefined && this.content != "") {  
            //this.open();  
            //setTimeout(this.close, 1000);  
            alert(this.content);  
        }  
        if (callBack != undefined)  
            callBack(this.callBackData);  
    }  
    else {  
        //this.open();  
        //setTimeout(this.close, 2000);  
        alert(this.content);  
    }  
}  
 
//关闭  
ajaxMsg.prototype.close = function() {  
    removeMsg();  
}  
function removeMsg() {  
    $("div").remove("#MsgMask");  
    $("div").remove("#MsgFrame");  
    showSelects();  
}

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

下面是他的css

Code  
.mask  
{  
    background-color: #fff;  
    width: 100%;  
    height: 100%;  
    position: absolute;  
    display: block;  
    top: 0px;  
    left: 0px;  
    filter:alpha(opacity=0);-moz-opcacity:0;opacity:0;  
    z-index:1;  
}  
 
.frame  
{  
    position: absolute;  
    z-index: 2;  
    min-width:400px;  
    font-size:12px;  
    background-color:#fff;  
    overflow:hidden  
}  
.ajaxwin  
{  
    border: 1px solid #ccc;  
    text-align:left;  
}  
.frame .head  
{  
    line-height:25px;  
    background-color: #d3eaff;  
    clear:both;  
      
}  
.frame .head .title  
{  
    position:relative;  
    left:5px;  
    font-size: 12px;  
    font-weight: bold;  
    color: #000;  
}  
.frame .head .btnclose  
{  
    position:absolute;  
    top:0px;  
    right:5px;  
}  
.default 
{  
    border: 1px solid #95A1B6;  
}  
.msg_error  
{  
    border: 2px solid #FF6600;  
    background-color: #FFFFCC;  
    font-size: 14px;  
    overflow: hidden;  
    font-weight: bold;  
}  
.msg_error .head,.msg_tips .head,.msg_right .head{display:none;}  
.msg_tips,.msg_default  
{  
    border: 2px solid #3399FF;  
    background-color: #E6FFFF;  
    font-size: 14px;  
    height: 60px;  
    overflow: hidden;  
    font-weight: bold;  
}  
.msg_right  
{  
    border: 2px solid #009933;  
    background-color: #E8FFD0;  
    font-size: 14px;  
    height: 60px;  
    overflow: hidden;  
    font-weight: bold;  
}  
 
.content{ padding:25px; text-align:center;}  
.default .content,.ajaxwin .content{ padding:10px; text-align:left; }  
 
.frame .btnclose  
{  
    padding:5px;

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

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

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

Code  
//输入验证  
$.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系统：③表单提交

链接：http://www.cnblogs.com/mad/archive/2009/09/14/1566231.html

【编辑推荐】

【责任编辑：彭凡 TEL：（010）68476606】