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

　　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("<div id=\"MsgMask\" class=\"mask\"></div>");
　　　 //设置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("<div id=\"MsgFrame\" class=\"frame\"></div>");
　　　 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("<div id=\"MsgContent\" class=\"content\">" + this.content + "</div>");

　　　 //设置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

.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;
}

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