使用mvc4可以很快速的创建页面，但封装的过多，难免会有些性能上的问题。所以基于此，通过使用简单的手写html，加ajax，json来创建一个注册页面，会比较干净，简洁。

本项目的环境是MVC4+EF5.0+JQuery1.8.2+VS2013

先上下效果图：

创建这么一个注册页面，分以下几个步骤

1、创建页面html

2、js对用户输入数据的验证

3、json+ajax get数据 验证用户名

4、json+ajax post数据 提交用户注册信息

5、css3美化页面

下面就开始把实现的具体过程加以描述：

1、创建页面html

添加一个视图，命名Index.cshtml，将以下html代码粘贴进入：

<body>

        <div id="background">

            <h1 id="logo">flowbywind</h1>

            <div id="content">

                <h2>注册</h2>

                  <fieldset>

                      <label for="userName">用户名</label><span class="required">*</span>

                      <input name="userName"  type="text" id="userName"/>

                  </fieldset>

                <fieldset>

                    <label for="userPwd">密码</label><span class="required">*</span>

                    <input name="userPwd" type="password" id="userPwd"/>

                </fieldset>

                <fieldset>

                    <label for="userPwd2">确认密码</label><span class="required">*</span>

                    <input name="userPwd2" type="password" id="userPwd2" />

                </fieldset>

                <fieldset>

                    <label for="邮箱">邮箱</label><span class="required">*</span>

                    <input name="userEmail" type="text" id="userEmail"/>

                </fieldset>

                <fieldset class="nolabel">

                    <input type="button"  id="register" value="注册" />

                </fieldset>

            </div>

        </div>

    </body>

2、js对用户输入数据的验证

用户输入数据的验证主要集中在用户名是否已经存在，密码和验证密码是否相同，邮箱的格式是否符合规则

首先我们建立一个工具类util.js ，里面主要用来验证数据是否为空，邮箱格式，显示错误警告和取消显示警告等公共方法

如这里判断控件数据是否为空的方法：

//判断输入控件的值是否为空

//这里的e参数 如果不传值得话，默认是事件对象，通过这个事件对象，可以获得触发事件的对象

function fieldIsFilled(e)

{

    var me = getActiveObject(e); //获取触发事件的对象

    if (me.value == "") {

        //display an error

        warn(me, "required");

    }

    else {

        //cancle display error

        unwarn(me, "required");

    }

}
上述方法中的getActiveObject函数， 主要是为了考虑浏览器的兼容性，方法如下：
///获得触发事件的对象

///用来处理多个事件处理程序中IE不支持this为触发事件的对象

function getActiveObject(e)

{

    var obj;

    if (!e)  // 较早版本的IE 不会发送这样一个对象 只能通过window.event属性获得事件对象

    {

        obj = window.event.srcElement;

    }

    else if (e.srcElement)  //IE 7 或者之后的版本

    {

        obj = e.srcElement;

    }

    else {

        obj = e.target; //支持DOM Level 2 浏览器（chrome 火狐 opera） 通过所传入事件的target属性提供当前对象

    }

    return obj;

}
上述方法中有个warn和unwarn 两个方法，这两个方法分别用来控制显示错误警告和取消显示警告的作用。
其中warn代码如下：
支持动态的添加错误内容到html页面，即如果出现用户输入数据不合法，则新增p元素，由p元素显示错误内容，相反unwarn方法，就是将p元素移除html页面。
    //显示用户输入数据的不合法原因 field 控件对象 warningType是在userRegister.js中的required、IsExist等

function warn(field, waringType) {

    var parentNode = field.parentNode; //获取当前对象的父节点

    //用eval计算json数据的值（如warnings.userName.required在userRegister.js中指示为用户名不得为空）取得错误提示内容

    var warning = eval("warnings." + field.id + "." + waringType);

    //判断父节点下面的p元素是否存在，p元素是用来显示错误的，如果不存在，则生成p元素到该父节点下。

    if (parentNode.getElementsByTagName("p").length == 0) {

        var p = document.createElement("p");

        field.parentNode.appendChild(p);

        var warningNode = document.createTextNode(warning);

        p.appendChild(warningNode);

    }

        //如果p已经存在，则更新当前错误内容

    else {

        var p = parentNode.getElementsByTagName("p")[0];

        p.childNodes[0].nodeValue = warning; //p的childNodes[0]代表p的第一个子节点即文本节点，文本节点的nodeValue即为文本值

    }

}


在这里warning是声明的全局变量 也是一段json数据，存储的是各个控件的数据限制内容：




var warnings = {

    "userName": {

        "required": "用户名不得为空",

        "IsExist":"用户名已经存在，请重新输入"

    },

    "userPwd2": {

        "required": "密码不得为空",

        "isEqual": "两次密码必须输入相同"

    },

    "userPwd": {

        "required": "密码不得为空",

    },

    "userEmail": {

        "required": "邮箱不得为空",

        "format":"邮箱格式不正确，示例：'name@domain.com'"    },


    "register": ""

}




为了能达到实时响应用户输入数据是否合法，在页面初始化时绑定监听事件，在用户输入完毕后触发数据的校验：




window.onload = initPage;

   //初始化页面时，给控件绑定事件，这里用到了多个事件处理程序，即控件一次会执行多个事件

function initPage(){

    //addEventHandler是监听事件  根据浏览器选择性调用addEventListener(使用chrome 火狐等)或attachEvent（适用IE）方法

    addEventHandler(document.getElementById("userName"), "blur", fieldIsFilled);  //多事件处理程序

    addEventHandler(document.getElementById("userName"), "blur", checkUserName);

    addEventHandler(document.getElementById("userPwd"), "blur", fieldIsFilled);

    addEventHandler(document.getElementById("userPwd2"), "blur", fieldIsFilled);

    addEventHandler(document.getElementById("userPwd2"), "blur", checkPwdEqual);

    addEventHandler(document.getElementById("userEmail"), "blur", emailIsProper);

    addEventHandler(document.getElementById("userEmail"), "blur", fieldIsFilled);

    document.getElementById("register").onclick = submitData;

};




3、json+ajax get数据 验证用户名


下面讲一下用json+ajax get数据，来验证用户名的，即验证用户输入的名称是否已经被注册了。




//检测用户名是否重复

function checkUserName() {

    jQuery.ajax({

        url: "register/validateUser",

        type: "GET",

        data: { "userName": $("#userName").val() },

        contentType: "application/x-www-form-urlencoded",

        success: function (data) {

            if (data == "false") {

                warn(document.getElementById("userName"), "IsExist");

            }

            if (data == "ok") {

                unwarn(document.getElementById("userName"), "IsExist");

            }

        },

        error: function (xhr, error, ex)

        {

            var div = document.createElement("div");

            div.innerText =  "出现错误，请稍后再试，带来不便，敬请谅解";

            document.getElementsByTagName("body")[0].appendChild(div);

        }

    });

    //使用jquery 的ajax发送 请求

}




相应的后台代码为：




public string ValidateUser(string userName)

        {

            using(LoginDbContext db=new LoginDbContext())

            {

                //如果当前用户名 已经存在 返回false

            if (db.UserRegisters.Where(a=>a.UserName==userName ).Count()>0)

            {

                return "false";

            }

            else

            {

                return "ok";

            }

            }

        }




4、json+ajax post数据 提交用户注册信息


使用ajax+json 在mvc中post的数据，需要注意的几点是：


1）修改contentType为"application/json"，发送数据使用JSON.stringfy(js实体对象);JSON.stringfy的作用是将对象格式化为json字符串，正好和JSON.parse相反，JSON.parse是将json字符串解析为对象。


js实体对象是根据实体属性来构造的，如下：




function userRegisterModel() {

    var self = this;

    this.UserName = $("#userName").val();

    this.UserPwd = $("#userPwd").val();

    this.UserEmail = $("#userEmail").val();

}




接下来用ajax 提交数据，




var request = new userRegisterModel();

    $.ajax(

        {

            url: "Register/Register",

            type: "POST",

            dataType: "json",

            data: JSON.stringify(request),

            contentType: "application/json",

            success: function (data) {

                if (data.result == "success") {

                    warnings["register"]["register"] = data.content;

                    warn(document.getElementById("register"), "register");

                }

                if (data.result == "error") {

                    warnings["register"]["register"] = data.content;

                    warn(document.getElementById("register"), "register");

                }

            }

        }

        );




相应的后台处理代码为：




        [HttpPost]

        public JsonResult Register(UserRegister model)

        {

            using (LoginDbContext db = new LoginDbContext())

           {

               if (db.UserRegisters.Where(a => (a.UserName == model.UserName)).Count() > 0) {

                   return Json(new { result = "error", content = "用户名已经存在" });

               }

               if (db.UserRegisters.Where(a => a.UserEmail == model.UserEmail).Count() > 0)

               {

                   return Json(new { result="error", content="邮箱已经存在"});

               }

               db.UserRegisters.Add(model);

               db.SaveChanges();

               return Json(new { result="success",content="欢迎你"+model.UserName});

            }

        }




5、css3美化页面


这里主要用了css3里的渐变、下拉阴影、文本阴影等特效


渐变的css代码为： -webkit-前缀的是为了适用于chrome safari浏览器，-moz-是为了适用于火狐，-o-适用于opera浏览器，不带前缀的为css3标准规范。




/*不支持css3时显示此背景色，优雅降级*/

background:#d2d2d2;

/*渐变默认是垂直方向的，这里倾斜角度为45 从#d2d2d2 渐变到#ccc*/

background:-webkit-gradient(linear,left top,left bottom,from(#d2d2d2),to(#ccc));

background:-webkit-linear-gradient(-45deg,#d2d2d2,#ccc);

background:-moz-linear-gradient(-45deg,#d2d2d2,#ccc);

background:-o-linear-gradient(-45deg,#d2d2d2,#ccc);

background:linear-gradient(-45deg, #d2d2d2,#ccc);




下拉阴影的代码为： （注意不要使用过火，下拉阴影非常消耗性能）




/*水平偏移量 垂直偏移量 模糊直径 颜色*/

-webkit-box-shadow:8px 5px 15px #404040;

-moz-box-shadow:8px 5px 15px #404040;

box-shadow:8px 5px 15px #404040;




文本阴影的代码为：




/*水平偏移量 垂直偏移量 模糊直径 颜色*/

text-shadow:1px 1px 0.5em #fff;




源码中还有一个使用css3的示例，未使用一张图片，在manage文件夹下，效果图如下：




源码下载


ps：离职了，找工作中……广州/深圳  围观简历


动动手指，点下支持吧，您的支持是我最大的动力！
												


											
基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面（get&post）的更多相关文章
	

    
								
  1. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（3）-漂亮系统登陆界面
		
    系列目录 前言 本文于2016-10修改 这次的代码是基于上一节的代码集成的,素材都在第二节里头 本次添加登录页面的控制器即可 实现 添加Account的Index视图: @{ Layout = nu ...
    
		
    2. 
						
  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]
		
    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...
    
		
    3. 
						
  3. 基于jQuery实现的Ajax 验证用户名唯一性
		
    基于jQuery实现的Ajax 验证用户名唯一性 前端jsp页面代码 <tr> <th><span class="requiredField"> ...
    
		
    4. 
						
  4. 基于MVC4+EasyUI的Web开发框架经验总结（3）- 使用Json实体类构建菜单数据
		
    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
    
		
    5. 
						
  5. MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查
		
    MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的:   1.MVC3项目简单配置EF code first生成并初始化数据 ...
    
		
    6. 
						
  6. 基于Jquery+Ajax+Json+存储过程 高效分页
		
    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
    
		
    7. 
						
  7. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
		
    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...
    
		
    8. 
						
  8. 基于MVC4+EasyUI的Web开发框架经验总结
		
    http://www.cnblogs.com/wuhuacong/p/4093778.html 在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图 标,从而是Web系统 ...
    
		
    9. 
						
  9. 基于MVC4+EasyUI的Web开发框架经验总结（14）--自动生成图标样式文件和图标的选择操作
		
    在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. swift  pop实现动感按钮动画
			
    // //  MyButton.swift //  PopInstall // //  Created by su on 15/12/11. //  Copyright © 2015年 tian. A ...
    
			
    2. 
						
  2. Bootstrap导航栏
			
    导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...
    
			
    3. 
						
  3. 用 pyqt4 编写的一个翻译小工具
			
    有时候我们在开发时遇到一些陌生的英文单词或者不容易看出某些长句的中文意思时该怎么办呢?打开桌面上的翻译软件?打开浏览器里收藏着的翻译网址或者直接贴上百度的搜索框去查?这些方法固然可以,还很常见,但如果 ...
    
			
    4. 
						
  4. 13、容器之间的link
			
      很多时候我们的业务分为前台和后台,例如:"前台的代码需要连接数据库进行数据操作":但是在写代码的时候我们并不知道后台数据库的地址是什么,所以我们可以docker通过固定的名字来 ...
    
			
    5. 
						
  5. ASP.NET Core2集成Office Online Server（OWAS）实现办公文档的在线预览与编辑（支持word\excel\ppt\pdf等格式）
			
    Office Online Server是微软开发的一套基于Office实现在线文档预览编辑的技术框架(支持当前主流的浏览器,且浏览器上无需安装任何插件,支持word.excel.ppt.pdf等文档 ...
    
			
    6. 
						
  6. css+html+JQuery 万能弹出层，居中显示
			
    function ShowMsg(str) {//要提示的文字 $(".payment_time_mask").remove(); $("body").appe ...
    
			
    7. 
						
  7. swagger简单配置
			
    第一步: 在nuget.org中查找Swashbuckle并下载 在nuget.org中查找Swagger.net.UI,并下载 第二步: 下载完之后,App_Start多了三个文件 Swagger. ...
    
			
    8. 
						
  8. uwp获取版本信息win10 VersionInfo
			
    using Windows.System.Profile; Después vamos a agregar una propiedad que va a contener un mensaje con ...
    
			
    9. 
						
  9. vsftp -samba-autofs
			
    摘要: 1.FTP文件传输协议,PAM可插拔认证模块,TFTP简单文件传输协议. 注意:iptables防火墙管理工具默认禁止了FTP传输协议的端口号 2.vsftpd服务程序三种认证模式?三种认证模 ...
    
			
    10. 
						
  10. Android 如何查看源码 （eclipse 按住 ctrl ）
			
    首先要确认 Android SDK Manager 下载并安装了 sources.然后在代码中按住 ctrl 在点一个类名, 如果打开的页面是找不到源码,就点那个按钮,然后找到源码所在的文件夹,就可以 ...
    
			
    11.