MVCjQuery开发BS系统③：表单提交t.doc

今天我们就谈如何用JQuery+MVC来处理表单的提交。想达到的效果： 1、提交前的表单验证 2、表单验证 3、提交后的反馈信息ok，先说一下工作的原理。前台，action指定了接受表单的处理页面。method这里我们只说post如果用ajax提交表单，自然xxx.aspx便是请求的url。ajax请求后的callback便是响应表单的提交结果(错误、成功)，我们提交的反馈信息用一个 浮层(lightbox)来表示。 不至于用 alert(); 这样铛铛铛很囧。我们引入一个Jquery的插件/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类publicclassJsonMessagepublicintresultget;set;/0错误1正确2提示3警告publicstringtitleget;set;/Lightbox窗口的标题publicstringcontentget;set;/message的具体内容publicstringredirectget;set;/弹出后自动跳转的到哪里？publicobjectcallBackDataget;set;/客户端需要的数据 比如 一个新增的id或整个modelMVC返回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(); $(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 = $(inputname= + + :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); $(.r