Jquery ui dialog登陆注册


1、用户控件
<%  @  Control  Language ="C#"  AutoEventWireup ="true"  CodeBehind ="Register.ascx.cs"  Inherits ="ProjectName.Register"  %>
< div  id ="dialog-form"  title =" 注册  ">
     < p ><  big >< strong  > 用户注册 </ strong  ></ big >  </  p >  
      < p  class ="validateTips"></ p >           
     < fieldset >
         < label  for ="firstname">   </ label >
         < input  type ="text"  name ="firstname"  id ="firstname"  class ="text ui-widget-content ui-corner-all"  />
         < label  for ="lastname">   </ label >
         < input  type ="text"  name ="lastname"  id ="lastname"  class ="text ui-widget-content ui-corner-all"  />                              
         < label  for ="address"> 地址  </ label >
         < input  type ="text"  name ="address"  id ="address"  class ="text ui-widget-content ui-corner-all"  />
         < label  for ="email"> 邮箱  </ label >
         < input  type ="text"  name ="email"  id ="email"  class ="text ui-widget-content ui-corner-all"  />                
         < label  for ="phone"> 电话  </ label >             
         < input  type ="text"  name ="phone"  id ="phone"  class ="text ui-widget-content ui-corner-all"  />
         < label  for ="infocategory"> 资讯种类  </ label >             
         < select  name ="infocategory"  id  ="infocategory"  class ="selectbox">
             < option  selected ="selected"  value ="0"> 全部  </ option >
             < option    value ="1"> 模擬帳戶  </ option >
             < option    value ="2"> 外匯  </ option >
             < option    value ="3"> 宣傳 </ option  >
             < option    value ="4"> 諮詢  </ option >
         </ select >    
     </ fieldset >
</ div >
      < style  type ="text/css">
        #dialog-form  input.text
    {
             margin-bottom :  12px  ;
             width :  95%  ;
             padding :  .4em  ;
    }
     #dialog-form  .selectbox
    {
             margin-bottom :  12px  ;
             width :  97%  ;
             border : solid  1px  #ccc ;
             background : #fff  ;
    }
     #dialog-form  fieldset
    {
             padding :  0  ;
             border :  0  ;
             margin-top :  25px  ;
    }
     .ui-dialog  .ui-state-error
    {
             padding :  .3em  ;
    }
     .validateTips
    {
             border :  1px  solid  transparent ;
             padding :  0.3em  ;
    }
     .ui-widget
    {
             font-size :  10.5pt  ;
    }
     .ui-dialog  .ui-dialog-buttonpane  .ui-dialog-buttonset
    {
             text-align : center
    }
 
     </ style >
    < script  src ="js/jquery-1.7.2.min.js"  type  ="text/javascript"></  script >
     < script  src ="js/jquery-ui-1.8.21.custom.min.js"  type  ="text/javascript"></  script >
     < script  src ="js/register.js"  type  ="text/javascript"></  script >
     < link  href ="css/ui-lightness/jquery-ui-1.8.21.custom.css"  rel  ="stylesheet"  type  ="text/css"  />



2、一般处理程序
using  System;
using  System.Collections;
using  System.Data;
using  System.Linq;
using  System.Web;
using  System.Web.Services;
using  System.Web.Services.Protocols;
using  System.Xml.Linq;
using  Entity;
using  BizComponents;
using  System.Web.Security;

namespace  Project
{
     ///  <summary>
     ///  $codebehindclassname$  的摘要说明
     ///  </summary>
    [  WebService (Namespace =  "http://tempuri.org/"  )]
    [  WebServiceBinding (ConformsTo =  WsiProfiles  .BasicProfile1_1)]
     public  class  register  :  IHttpHandler , System.Web.SessionState. IRequiresSessionState
    {

         public  void  ProcessRequest( HttpContext  context)
        {
            context.Response.ContentType =  "text/plain" ;
              Members_Biz   biz =   new   Members_Biz ();
             string  Email = context.Request[ "email" ].ToString();
             bool  IsUnique = biz.IsUniqueEmail(Email);
             if  (IsUnique)
            {
                 if  ( string  .IsNullOrEmpty(context.Request[  "status" ]))
                {
                     Members  db =  new  Members ();
                    db.LastName = context.Request[  "lastname" ].ToString();
                    db.FirstName = context.Request[  "firstname" ].ToString();
                    db.Address = context.Request[  "address" ].ToString();
                    db.Phone = context.Request[  "phone" ].ToString();
                    db.Email = context.Request[  "email" ].ToString();
                    db.InfoCategory =  Convert .ToInt32(context.Request[ "infocategory" ]);
                    db.RegTime =  DateTime .Now;
                    db.EditTime =  DateTime .Now;
                    db.Status = 1;
                    db.Password = SetMD5(  "123456" ,  "MD5"  );

                     int  num = biz.Members_ADD(db);
                     if  (num > 0)
                    {
                        context.Session[  "userName" ] = db.NickName;
                        context.Response.Write(  "success" );
                    }
                     else
                    {
                        context.Response.Write(  "false" );
                    }
                }
                 else
                {
                    context.Response.Write(  "success" );
                }
            }
             else
            {
                context.Response.Write(  " 已注册 "  );
            }


        }

         public  bool  IsReusable
        {
             get
            {
                 return  false  ;
            }
        }
         ///  <summary>
         ///  MD5 加密
         ///  </summary>
         ///  <param name="pwd"></param>
         ///  <param name="type"></param>
         ///  <returns></returns>
         string  SetMD5( string  pwd,  string  type)
        {
             return  FormsAuthentication  .HashPasswordForStoringInConfigFile(pwd, type);
        }

    }
}

3、js
//var jq =jQuery.noConflict();
//jq(
// $( "dialog:ui-dialog" ).dialog( "destroy"   ); 改为 $( "dialog-form:ui-dialog" ).dialog( "destroy"   );或 $( ":ui-dialog" ).dialog( "destroy"   );
$( function () {
$( "dialog-form:ui-dialog" ).dialog( "destroy"  );
     var  firstname = $( "#firstname"  ),
     //password = $("#password"),
                        lastname = $(  "#lastname" ),
                        address = $(  "#address" ),
                        phone = $(  "#phone" ),
                        email = $(  "#email" ),
                        infocategory = $(  "#infocategory"  ),
                        allFields = $([]).add(firstname).add(lastname).add(address).add(phone).add(email).add(infocategory),
                        tips = $(  ".validateTips"  );
     function  updateTips(t) {
        tips.text(t).addClass(  "ui-state-highlight"  );
        setTimeout(  function () {
            tips.removeClass(  "ui-state-highlight"  , 1500);
        }, 500);
    }
     function  checkLength(o, n, min, max) {
         if  (o.val().length > max || o.val().length < min) {
            o.addClass(  "ui-state-error"  );
            updateTips(  " "  + n +  "  必须在  "  +
                                        min +  "    "  + max +  " 字符之间  ." );
             return  false  ;
        }  else  {
             return  true  ;
        }
    }

     function  checkRegexp(o, regexp, n) {
         if  (!(regexp.test(o.val()))) {
            o.addClass(  "ui-state-error"  );
            updateTips(n);
             return  false  ;
        }  else  {
             return  true  ;
        }
    }

    $(  "#dialog-form" ).dialog({
        autoOpen:  false ,
        show:  "blind" ,
        hide:  "explode" ,
        height: 550,
        width: 550,
        bgiframe:  true ,
        modal:  true ,
        buttons: {
             " 注册 "  :  function () {
                 var  bValid =  true  ;
                allFields.removeClass(  "ui-state-error"  );
                bValid = bValid && checkLength(firstname,  " 姓的长度 " , 2, 16);
                bValid = bValid && checkLength(lastname,  " 名的长度 " , 2, 16);
                bValid = bValid && checkRegexp(email, /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}/,  "  邮箱格式不对  " );
                bValid = bValid && checkRegexp(phone, /^((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/,  " 电话格式不对 " );
                 //           bValid = bValid && checkLength(password, "  密码长度 ", 3, 16);
                 //           bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "  密码只能为阿拉伯数字和字母  : a-z 0-9");
                 // 获取数据,并对数据进行操作
                 if  (bValid) {
                    $.post(  "/register.ashx"  , {
                        firstname: firstname.val(),
                        lastname: lastname.val(),
                         //password: password.val()
                        address: address.val(),
                        phone: phone.val(),
                        email: email.val(),
                        infocategory: infocategory.val()
                    },
                         function (data) {
                             var  dat = data;
                             if  (dat ==  "success"  ) {
                                $(  "#dialog-form" ).dialog( "close"  );
                                alert(  " 注册成功,将调回首页 " );
                                setTimeout(  "location.href='/index.aspx'"  , 1000);
                            }
                             else  {
                                alert(  " 注册失败,请重新尝试!  " );
                            }
                        });
                }
            },
             " 取消 "  :  function () {
                $(  this ).dialog( "close"  );
            }
        },
        close:  function () {
            allFields.val(  "" ).removeClass( "ui-state-error"  );
        }
    });
    $(  "#Btn_Gray_M" ).click( function  () {
        $(  "#dialog-form" ).dialog( "open"  );
    });

    $(  "#email" ).bind( "blur"  ,  function () {
         var  bool = checkRegexp($( "#email"  ), /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}/,  " 邮箱格式不对 " );
         if  (bool) {
            $.  get ( "/register.ashx"  , { email: $( "#email" ).val(), status: 1 },  function (data) {
                 if  (data ==  "  已注册 " ) {
                    $(  "#email" ).addClass( "ui-state-error"  );
                    updateTips(  " 邮箱已经注册 " );
                     return  false  ;
                }
                 else  {
                    $(  "#email" ).removeClass( "ui-state-error"  );
                    updateTips(  "" );
                    $(  ".validateTips"  ).removeClass( "ui-state-highlight" );
                }
            });
        }
    });

     function  login_alert() {
        $(  "#dialog-form" ).dialog( "open"  );
    };
})
//);



4、asp.net前台
  <%  @  Register  Src ="~/Register.ascx"  TagName ="Register"  TagPrefix ="Register"  %>
     < input  type ="button"  value =" 注册获取更多资料  "  id  ="Btn_Gray_M"  class  ="Btn_Gray_M"  />
      < div  style =" display  : none">< Register  : Register  ID ="Register1"  runat ="server"  /></ div >





 
  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery UI标准后台页面演示系统说明 系统的设计目的 我B/S软件开发,基本上还是采用原型法的--嗯,好吧,可能原型法还是往自己脸上贴金了。俗一点说吧,就是和客户定一个尽可能详细的功能描述文档,然后按文档写完程序,再回交给客户演示,客户观看演示后会提出很多意见,再按这些意见修改,然后再演示,如此循环往复,直至交稿。与最初的演示稿相比,最后的完成稿出入很大,大量的工作,其实都是浪费的。我就想,能不能以后先一个快速生成的演示系统,用户确认后再真正制作程序呢?于是就有了这个演示系统的产生。 作为系统的第一个版本,这个系统功能比较简单。我之前的设想,是用zend framework框架设计一个接近CMS功能的后台,统一用户管理、文章发布等常用功能,但这么一来,系统的适用范围就小了。所以,先一套极简易的小架构,即使没有学过PHP的.net/java程序员,应该也能很容易看懂并上手使用,甚至把它改成其它语言的版本。 目前的这个版本,最值得推荐的功能在于,jQuery代码是一次载入的,使用这套系统进行开发,程序员可以完全不懂jQuery,而仍能享用jQuery的种种便利。 0.1版系统特点介绍 • 集成了jQuery UI的风琴盒、页标签特效、ajaxForm表单递交和validate表单验证功能,无需程序员学习这些功能,按常规方式编程即可自动调用。 • 保持了与jqueryui的完全兼容,可以自行前往www.jqueryui.com网站下载更多酷炫界面风格,甚至自定义风格 • 涉及的PHP代码极少且足够建议,非PHP程序员也能使用 • 对系统要求非常低,只要普通PHP程序能够运行即可 系统实际使用步骤 1. 复制(解压)文件夹到网站测试文档根目录(apache系统下一般是htdocs),即可直接访问 2. 修改config.php文件中的数组,即可快速生成界面结构 3. config.php中的$tabs数组就是页面标签内容,其中的url可自行指定或新建文件,文件格式可以参照admin.php、helper.php等文件 4. 如果$tab中url指向的文件中需要包含表单,按常规写法即可,无需特殊代码即可自动以ajax方式递交 5. 如果表单需要ajax方式验证,可以给相应的表单项添加class,可参见systemsetting.php和address.php文件,也可自行网上搜索和阅读jquery.validate.js的帮助文档 6. 演示中的项目,只有核心系统下的后台首页和系统设置有效,其它都只是点缀
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值