ASP.NET实现个人信息注册页面并跳转显示
题目
新建一个MVC项目,利用HTML、CSS、JS、jQuery、Ajax、jQuery UI等技术设计一个个人信息注册页面。当点击“提交”按钮时,跳转到新的页面显示录入信息。
基本要求:
用户名为6-10个小写字母(小写使用正则式验证,且用户名不能为“wustzz” –用Ajax技术来检测);密码为6位数字,确认密码不一致时有提示;籍贯使用级联(jquery实现);Email必须符合Email格式;手机是11位(假设规定以1569开头);出生年月使用jQuery UI日历组件设置;图片要传递到新的页面显示。
实现效果
(源码在文章结尾)
主要涉及知识点
1、基本的html界面编程
2、JavaScript语言
3、jQuery、jQuery UI的使用
4、ASP.NET Request相关操作
5、了解ASP.Net WEB MVC下的目录结构以及基础编程
代码
ProjectController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace ProjectOne.Controllers { public class ProjectController : Controller { // GET: Project public ActionResult Index() { return View(); } public ActionResult Show() { //获取图片文件 HttpPostedFileBase file = Request.Files["filename"]; if(file != null) { //将图片存储在/Content/UpLoad/目录下,名字为111.png var fileName = Request.MapPath("~/Content/UpLoad/") + "111.png"; file.SaveAs(fileName); } return View(); } } }
Index.cshtml
@{ ViewBag.Title = "Index"; } <script src="~/Scripts/my_script.js"></script> <script src="~/jquery-ui-1.11.1.custom/external/jquery/jquery.js"></script> <script> $(document).ready(function () { $("#native_place").change(function () { switch ($("#native_place").val()) { case "江苏": $("#major").empty(); $("#major").append("<option value=''></option>"); $("#major").append("<option value='江阴'>江阴</option>"); $("#major").append("<option value='无锡'>无锡</option>"); $("#major").append("<option value='常州'>常州</option>"); break; case "湖北": $("#major").empty(); $("#major").append("<option value=''></option>"); $("#major").append("<option value='武汉'>武汉</option>"); $("#major").append("<option value='武昌'>武昌</option>"); $("#major").append("<option value='荆州'>荆州</option>"); break; } }); }); </script> @section scripts{ <script src="~/jquery-ui-1.11.1.custom/jquery-ui.min.js"></script> <link href="~/jquery-ui-1.11.1.custom/jquery-ui.min.css" rel="stylesheet" /> <script> $(document).ready(function () { $("#birthday").datepicker({ dateFormat: "yy-mm-dd", inline: true }); }); </script> } <h2 style="color:red;font-family:楷体;font-size:30px;">请输入个人详细信息</h2> <form onsubmit="return checkAll()" action="~/Project/Show" method="post" enctype="multipart/form-data"> <table> <tr> <th>用户名</th> <th> <input type="text" onblur="checkName()" name="username" id="username" /> <span style="color:red;" id="tip_name">*</span> </th> </tr> <tr> <th>密码</th> <th> <input type="text" onblur="checkPassword()" name="psd" id="psd" /> <span style="color:red;" id="tip_psd">*</span> </th> </tr> <tr> <th>确认密码</th> <th> <input type="text" onblur="checkPasswordAgain()" name="psd_again" id="psd_again" /> <span style="color:red;" id="tip_psd_again">*</span> </th> </tr> <tr> <th>性别</th> <th> <input type="radio" name="gender" value="男" checked="checked" /> 男 <input type="radio" name="gender" value="女" />女 </th> </tr> <tr> <th>籍贯</th> <th> <select id="native_place" name="native_place"> <option value=""></option> <option value="江苏">江苏</option> <option value="湖北">湖北</option> </select> <select id="major" name="major"></select> </th> </tr> <tr> <th>Email</th> <th> <input type="text" onblur="checkEmail()" id="email" name="email" value="如 xujiajia@qq.com" /> <span style="color:red;" id="tip_email">*</span> </th> </tr> <tr> <th>手机号</th> <th> <input type="text" onblur="checkPhone()" id="phone" name="phone" value="手机是11位以1569开头的数字" /> <span style="color:red;" id="tip_phone">*</span> </th> </tr> <tr> <th>专业擅长</th> <th> <select name="speciality" multiple="multiple"> <option value="Windows编程">Windows编程</option> <option value="单片机编程">单片机编程</option> <option value="ASP.NET编程">ASP.NET编程</option> <option value="J2EE编程">J2EE编程</option> <option value="JAVA编程">JAVA编程</option> </select> </th> </tr> <tr> <th>业余爱好</th> <th> <input type="checkbox" name="hobby" value="足球" />足球 <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="排球" />排球 <input type="checkbox" name="hobby" value="唱歌" />唱歌 <input type="checkbox" name="hobby" value="其他" />其他 </th> </tr> <tr> <th>个人照片</th> <th> <input type="file" id="filename" name="filename" /> </th> </tr> <tr> <th>出生年月</th> <th> <input type="text" id="birthday" name="birthday" readonly="readonly" /> </th> </tr> <tr> <th>备注信息</th> <th> <textarea name="more_info" cols="40" rows="8"> 可以补充一下 </textarea> </th> </tr> <tr> <th></th> <th> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </th> </tr> </table> </form>
Show.cshtml
@{ ViewBag.Title = "Show"; } <h2 style="color:red;font-family:楷体;font-size:30px;">个人信息展示</h2> <table> <tr> <th>用户名</th> <th>@Request["username"]</th> </tr> <tr> <th>密码</th> <th>@Request["psd"]</th> </tr> <tr> <th>确认密码</th> <th>@Request["psd_again"]</th> </tr> <tr> <th>性别</th> <th>@Request["gender"]</th> </tr> <tr> <th>籍贯</th> <th>@Request["native_place"]</th> <th>@Request["major"]</th> </tr> <tr> <th>Email</th> <th>@Request["email"]</th> </tr> <tr> <th>手机号</th> <th>@Request["phone"]</th> </tr> <tr> <th>专业擅长</th> <th>@Request["speciality"]</th> </tr> <tr> <th>业余爱好</th> <th>@Request["hobby"]</th> </tr> <tr> <th>个人照片</th> <th><img id="img" src="~/Content/UpLoad/111.png" alt="" /></th> </tr> <tr> <th>出生年月</th> <th>@Request["birthday"]</th> </tr> <tr> <th>备注信息</th> <th>@Request["more_info"]</th> </tr> </table>
my_script.js
function checkName() { var u = document.getElementById("username"); var t = document.getElementById("tip_name"); var reg = /^[a-z]{6,10}$/; if (!reg.test(u.value)) { t.innerHTML = "用户名为6-10个小写字母"; return false; } else { if (u.value == "wustzz") { t.innerHTML = "用户名不可以为wustzz"; return false; } t.innerHTML = "用户名填写正确"; return true; } } function checkPassword() { var p = document.getElementById("psd"); var t = document.getElementById("tip_psd"); var reg = /^\d{6}$/; if (!reg.test(p.value)) { t.innerHTML = "密码为6位数字"; return false; } else { t.innerHTML = "密码填写正确"; return true; } } function checkPasswordAgain() { var p1 = document.getElementById("psd"); var p2 = document.getElementById("psd_again"); var t = document.getElementById("tip_psd_again"); if (p1.value != p2.value) { t.innerHTML = "密码前后不一致" return false; } else { t.innerHTML = "密码确认一致"; return true; } } function checkEmail() { var e = document.getElementById("email"); var t = document.getElementById("tip_email"); var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; if (!reg.test(e.value)) { t.innerHTML = "必须填写Email格式"; return false; } else { t.innerHTML = "Email填写正确"; return true; } } function checkPhone() { var p = document.getElementById("phone"); var t = document.getElementById("tip_phone"); var reg = /^1569\d{7}$/; if (!reg.test(p.value)) { t.innerHTML = "手机是11位以1569开头的数字"; return false; } else { t.innerHTML = "填写手机正确"; return true; } } function checkAll() { if (checkName() && checkPassword() && checkPasswordAgain() && checkEmail() && checkPhone()) { return true; } return false; }
源码地址:
http://download.csdn.net/detail/double2hao/9691584
以上所述是小编给大家介绍的ASP.NET实现个人信息注册页面并跳转显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对猪先飞网站的支持!
相关文章
- 这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 在很多网站用户先访问一个要登录的页面,但当时没有登录后来登录了,等待用户登录成功之后肯定希望返回到上次访问的页面,下面我就来给大家介绍登录后跳转回原来要访问的页...2016-11-25
- 在开发过程中,使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误,同样Visual Studio也支持对SQL Server里面的存储过程进行调试,下面就让我们看看具体的调试方法。...2021-09-22
PHP传值到不同页面的三种常见方式及php和html之间传值问题
在项目开发中经常见到不同页面之间传值在web工作中,本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了,本文总结一下这段日子中,在编程过程里常用的3种不同页面传值方法,希望可以给大家参考。有什么意见也希望大...2015-11-24- 直接为大家介绍制作过程,希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
- 这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- 这篇文章主要介绍了记一次EFCore类型转换错误及解决方案,帮助大家更好的理解和学习使用asp.net core,感兴趣的朋友可以了解下...2021-09-22
- 这篇文章主要介绍了解决vuex数据页面刷新后初始化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
- 对于乱码这个问题php开发者几乎都会有碰到过,我们下面主要是介绍了php文件乱码和页面乱码。PHP页面转UTF-8编码问题 1.在代码开始出加入一行: header("Content-Type: text/html;charset=utf-8"); 2.PHP文件编码问题...2015-10-21
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要介绍了JavaScript 获取滚动条位置并将页面滑动到锚点的的相关资料,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下...2021-02-09
- 这篇文章主要介绍了java后台实现js关闭本页面,父页面指定跳转或刷新操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
- 这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
- 这篇文章主要介绍了Nginx根据不同浏览器语言配置页面跳转的方法,包括一个简体繁体的基本判断方法及实际根据中英文跳转的例子,需要的朋友可以参考下...2016-05-22
IE6中链接A的href为javascript协议时不在当前页面跳转
切页面时有时用链接A来替代按钮,这样做有几个好处 鼠标放上时默认有手状效果(不用添加cursor:pointer) 可以添加低版本IE都支持的伪类 如果点击时页面要整体刷新,即跳转,这时IE6则不尽人意,如下 复制代码 代码如下: <p>...2014-06-07- 这篇文章主要给大家介绍了关于微信小程序页面间传值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-09
Vue-Element-Admin集成自己的接口实现登录跳转
关于这个Vue-element-admin中的流程可能对于新的同学不是很友好,所以本文将结合实例代码,介绍Vue-Element-Admin集成自己的接口实现登录跳转,感兴趣的小伙伴们可以参考一下...2021-06-23- 这篇文章主要介绍了vue实现在进行增删改操作后刷新页面,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 这篇文章主要介绍了Pycharm 跳转回之前所在页面的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-05