使用EasyUI一般处理程序完成form表单验证

 

使用EasyUi来完成form表单验证首先要引用文件

 

<link href="EasyUI/themes/material/easyui.css" rel="stylesheet" />
    <link href="EasyUI/themes/icon.css" rel="stylesheet" />--图片样式
    <script src="EasyUI/jquery.min.js"></script>
    <script src="EasyUI/jquery.easyui.min.js"></script>
    <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>--使用语言

样式：

<style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #big {
            width: 100%;
            height: 1200px;
            position:relative;
        }
        .logBanner {
            width:100%;
            height:100%;
        }
        #addProce {
    position:static;
        }
          td {
            width:300px;
        }
        .textbox {
            width:280px;
            height:40px;
            line-height:40px;
            font-size:18px;
        }
        .ICP {
    width: 100%;
    height: 170px;
    line-height: 70px;
    text-align: center;
    background: #cecaca;
   position:absolute;
}
    </style>

代码：

  <div id="big">
        <div id="addProce">
            <form id="form" method="post">
                <table style="width: 460px; border: 0px;" cellspacing="20">
                    <tr>
                        <td>
                            <div style="text-align: right;font-size:18px">姓名：</div>
                        </td>
                        <td>
                            <input id="Name" name="Name" class="easyui-validatebox textbox" data-options="required:true," missingmessage="请输入你的用户姓名"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="text-align: right;font-size:18px">性别：</div>
                        </td>
                        <td>
                            <select class="easyui-validatebox textbox" id="Sex" name="Sex"  style="width:100px" >
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </td>

                    </tr>

                    <tr>
                        <td>
                            <div style="text-align: right;font-size:18px">密码：</div>
                        </td>
                        <td>
                            <input id="pwd" name="pwd" type="password" class="easyui-validatebox textbox" data-options="required:true" />
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <div style="text-align: right;font-size:18px">重复密码：</div>
                        </td>
                        <td>
                            <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox textbox" required="required" validtype="equals['#pwd']" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="text-align: right;font-size:18px">邮箱：</div>
                        </td>
                        <td>
                            <input id="proe-mail" name="proe-mail" class="easyui-validatebox textbox" validtype="e-mail" data-options="required:true," invalidmessage="请输入正确邮箱地址" missingmessage="请输入邮箱地址！" />
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 121px; text-align: right;font-size:18px">电话号码：</td>
                        <td style="width: 189px">
                            <input id="Phone" name="Phone" class="easyui-validatebox textbox" data-options="required:true," invalidmessage="手机号有效长度11" missingmessage="请输入11位电话号码" maxlength="11" />
                        </td>
                    </tr>
                </table>
            </form>

        </div

布局后的运行效果：

验证两次密码是否一致

 $.extend($.fn.validatebox.defaults.rules, {
                equals: {
                     validator: function (value, param) {
                        return value == $(param[0]).val();
                    },
                    message: '两次密码不一致！'
                }

            });

添加点击事件：

  $("#addProce").dialog({
                title: "添加用户信息",
                width: 580,
                height:500,
                modal: true,
                buttons: [{
                    text: "注册",
                    iconCls: "icon-add",
                    handler: function () {
                        console.info("添加用户信息");
                    $.messager.progress({ text: "数据载入中....." });
                $("#form").form("submit", {
                url: "LoginHandlers.ashx",
                success: function (data) {
                    if (data == "ok") {
                        $.messager.alert("提示", "添加成功");
                        $.messager.progress("close");
                        window.location = "Login.aspx?name=" + $("#Name").val();

                    }
                    else {
                        $.messager.alert("提示", "添加失败");
                        $.messager.progress("close");
                    }
                },
                onSubmit: function () {
                    if ($("#form").form("validate") == false) {
                        $.messager.progress("close");
                        $.messager.alert("警告", "请将各项按要求填写完整");
                    }
                    console.info($("#form").form("validate"));
                    return $("#form").form("validate");
                }
            }
            )
                    }
                },
                {
                    text: "取消",
                    iconCls: "icon-remove",
                    handler: function () {
                        console.info("取消");
                    }
                }]

            });

如果不填写任何值进行提交就会进行提示：

在一般处理处理程序来接受传过去的值：

string name = "";
            string phone = context.Request["Phone"].ToString();
            string Name = context.Request["Name"].ToString();
            string sex = context.Request["Sex"].ToString();
            string ProEmail = context.Request["proe-mail"].ToString();
            string pwd = context.Request["pwd"].ToString();

            //context.Response.Write("Hello World");

      //接收性别的值是0或1而不是男和女，所以需要进行判断一下。

            if (sex == "1")
            {
                name = "男";
            }
            else
            {
                name = "女";
            }
            bool bl = ReginstManage.InsertUser(Name, name, ProEmail, phone, pwd);
            if (bl)
            {
                context.Response.Write("ok");
            }
            else
            {
                context.Response.Write("off");

            }

在前台的"submit"里面进行返回值得判断，如果添加成功则输出"ok",否则就是不成功！

使用EasyUI的好处是不用自己写验证方式，别人已经给你写好了，我们只需要按照他们的要求即可，是比较方便的！！！