jqury easyui实现表单的自动验证和提交

1.aspx页面部分

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Add.aspx.cs" Inherits="Web.User.Add" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <title>添加用户信息</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="content" region="center" title="添加用户" style="padding: 5px;">
        <div id="myDiv" class="easyui-panel" style="width: 100%; height: 100%; padding: 30px 60px;
            margin: 0 auto;">
            <form id="ff" method="post">
            <div style="margin-bottom: 20px">
                <input id="uid" class="easyui-textbox" name="用户编号" type="text" style="width: 100%"
                    data-options="label:'用户编号:',required:true">
            </div>
            <div style="margin-bottom: 20px">
                <input id="uname" class="easyui-textbox" name="用户名" style="width: 100%" data-options="label:'用户名:',required:true">
            </div>
            <div style="margin-bottom: 20px">
                <input id="upassword" class="easyui-textbox" name="密码" style="width: 100%" data-options="label:'密码:',required:true">
            </div>
            <div style="margin-bottom: 20px">
                <input id="email" class="easyui-textbox" name="电子邮箱" style="width: 100%" data-options="label:'电子邮箱:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom: 20px">
                <input id="phonenumber" class="easyui-textbox" name="电话号码" style="width: 100%" data-options="label:'电话号码:',required:true">
            </div>
            <div style="margin-bottom: 20px">
                <select id="jt" class="easyui-combobox" name="集团名称" label="所属集团" style="width: 100%">
                    <option value="-1" selected="selected">请选择</option>
                </select>
            </div>
            <div style="margin-bottom: 20px">
                <select id="gc" class="easyui-combobox" name="工厂名称" label="所属工厂" style="width: 100%">
                    <option value="-1" selected="selected">请选择</option>
                </select>
            </div>
            <div style="margin-bottom: 20px">
                <select id="role" class="easyui-combobox" name="角色" label="角色" style="width: 100%">
                    <option value="-1" selected="selected">请选择</option>
                </select>
            </div>
            <div style="text-align: center; padding: 5px 0">
                <input type="submit" class="easyui-linkbutton" style="width: 80px; height: 30px;"
                    value="添加">
                <input type="reset" class="easyui-linkbutton" style="width: 80px; height: 30px;"
                    value="清空">
            </div>
            </form>
        </div>
        <script type="text/javascript">
            //jquery的easyui进行自动验证的方法
            $('#ff').form({
                url: '/User/UserHandler.ashx',
                //当表单无效时停止提交
                onSubmit: function () {
                    return $(this).form('validate');
                },
                success: function (data) {
                    //弹出漂亮的弹出框（信息框）
                    $.messager.alert('Info', data, 'info');
                }
            });
        </script>
    </div>
</asp:Content>

和之前不同使用ajax异步提交表单，并且自己进行数据验证相比，这种方式更加简洁。

2.ashx后台处理程序

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Model;

namespace Web.User
{
    /// <summary>
    /// UserHandler 的摘要说明
    /// </summary>
    public class UserHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            // 如果表单是以 POST 方式提交的，则服务器端必须以 context.Request.Form[name] 或者 context.Request[name] 来获取；  
            // 表单元素必须要有 name 属性，因为Form[] 中的索引就是 name 属性的值；  
            // 注意： ajax提交请求时，需要设置data属性，后台才能够接收到表单中的数据，
            // 例如 data: $('#ff').serialize() 代表将form表单中的数据序列化传输。
            //string userName = context.Request.Form["txt"];  
            //string userPwd = context.Request.Form["pwd"];  

            // 如果表单元素以 GET 方式提交，则服务器端必须以 Request.QueryString[] 来获取，索引仍是name属性的值。  
            // 以 GET 方式提交的时候，会在浏览器的地址栏显示提交的内容。  
            //string userName = context.Request.QueryString["txt"];
            //string userPwd = context.Request.QueryString["pwd"];  

            UserInfo user1 = new UserInfo();
            user1.Id = context.Request.Form["用户编号"];
            user1.Name = context.Request.Form["用户名"];
            user1.Password = context.Request.Form["密码"];
            user1.Email = context.Request.Form["电子邮箱"];
            user1.Phonenumber = context.Request.Form["电话号码"];

            context.Response.ContentType = "text/plain";
            context.Response.Write(user1.ToString());
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

和之前的ajax异步提交表单没有区别。