ASP.NET实现个人信息注册页面跳转显示

科目

新建一个MVC项目，使用HTML、CSS、JS、jQuery、Ajax、jQuery UI等技术设计一个个人信息注册页面。当您单击“提交”按钮时，您将跳转到一个新页面来显示输入的信息。

基本要求：

用户名为6-10个小写字母(小写使用常规认证，用户名不能是“wustzz”——使用Ajax技术检测)；密码为6位，确认密码不一致时会提示；原生地点使用cascade (jquery实现)；电子邮件必须符合电子邮件格式；手机是11位数字(假设以1569开头)；出生日期使用jQuery UI日历组件设置；图片将被转移到新页面进行显示。

达到效果

(源代码在文章末尾)

主要与知识点有关

1.基本html界面编程

2.JavaScript语言

3.使用jQuery和jQuery用户界面

4.ASP.NET请求相关操作

5.了解ASP中Web MVC下的目录结构和基本编程。网

密码

ProjectController.cs

使用系统；使用系统。集合。通用；使用系统。Linq使用系统。Web使用系统。Web . Mvc命名空间ProjectOne。控制器{公共类project Controller : Controller {//GET: project public action result Index(){ return View()；}public ActionResult Show(){//获取图片文件httpostedfilebase file=request . files[' filename ']；if(文件！=null){//将图片存储在/Content/UpLoad/目录中，名称为111.png var filename=request . mappath(' ~/Content/UpLoad/')' 111 . png '；文件。另存为(文件名)；}返回视图()；}}}Index.cshtml

@{ViewBag .标题="索引";} script src=' http : ~/Scripts/my _ script。js '/script script src=' http : ~/jquery-ui-1。11 .1 .自定义/外部/jquery/jquery。js '/script脚本$(文档)。ready(function(){ $(' # native _ place ')).change(function(){ switch($(' # native _ place '))).val()) {case '江苏：美元(“#major”).empty()；$(“# major”).追加('选项值=' '/选项');$(“# major”).追加('选项值='江阴'江阴/option ')；$(“# major”).追加('选项值='无锡'无锡/option ')；$(“# major”).追加('选项值='常州'常州/option ')；打破；案例湖北：美元(“#major”).empty()；$(“# major”).追加('选项值=' '/选项');$(“# major”).追加('选项值='武汉'武汉/option ')；$(“# major”).追加('选项值='武昌'武昌/option ')；$(“# major”).追加('选项值='荆州'荆州/option ')；打破；}});});/script @ section scripts { script src=' http : ~/jquery-ui-1。11 .1 .自定义/jquery-ui。量滴js '/脚本链接href=' ~/jquery-ui-1。11 .1 .自定义/jquery-ui。量滴CSS ' rel='样式表/script$(文档)。ready(function(){ $(' #)生日')。日期选择器({ dateformat : ' YY-mm-DD '，内联： true })；});/script } H2风格=' color : red字体系列：楷体；' font-size :30 px'请输入个人详细信息/提交时的H2表单=“返回检查全部()”操作=“~/项目/显示”方法=' post ' enctype=' multipart/form-data ' table rth用户名/ththinput type=' text ' on bulr=' CheckNAmE()' name=' username ' id=' username '/span style=' color : red；id='tip_name'*/span/th/trtrth密码/ththinput type=' text ' on bulr=' CheckPassport()' name=' PSD ' id=' PSD '/span style=' color : red；id='tip_psd'*/span/th/trtrth确认密码/ththinput type=' text ' on bulr=' checkpassword Remote()' name=' PSD _ Remote ' id=' PSD _ Remote '/span style=' color : red；id=' tip _ psd _再次*/span/th/trth性别/ththinput type=' radio ' name=' gender ' value='男选中='选中'/男输入类型='收音机'名称='性别'值='女' /女/th/trth籍贯/thth select id=' native _ place ' name=' native _ place '选项值=' '/选项值='江苏'江苏/optionoption value='湖北'湖北/option/select select id=' major ' name=' major '/select/th/trtrthEmail/ththinput type=' text ' on bulr=' checkEmail()' id=' email ' name=' email ' value='如[电子邮件保护]'/span style=' color : red；'id='tip_email'*/span/th/trtrth手机号/ththinput类型=' text ' on bulr=' CheckPhone()' id=' phone ' name=' phone ' value='手机是11位以1569开头的数字/span style=' color : red；id='tip_phone'*/span/th/trtrth专业擅长/thth选择名称='特定'多个='多个'选项值=' Windows编程Windows操作系统操作系统编程/optionoption value='单片机编程'单片机编程/optionoption value='ASP .网编程ASP .网编程/optionoption value='J2EE编程J2EE编程/optionoption value='JAVA编程爪哇岛编程/option/select/th/trtrth业余爱好/ththinput type=' checkbox ' name=' hobby ' value='足球' /足球输入类型='复选框'名称='爱好'值='篮球' /篮球输入类型='复选框'名称='爱好'值='排球' /排球输入类型='复选框'名称='爱好'值='唱歌' /唱歌输入类型='复选框'名称='爱好'值='其他' /其他/th/trth个人照片/ththinput type=' file ' id=' filename ' name=' filename '/th/trth出生年月/ththinput类型='text' id='生日名称='生日readonly=' readonly '/th/trth备注信息/ththtextarea name=' more _ info ' cols=' 40 ' row=' 8 '可以补充一下/textarea/th/trtrth/ththinput类型='submit '值='提交/input type='reset' value='重置//th/tr/table/formShow.cshtml

@{ViewBag .标题='显示；} h2 style=' color:red字体系列：楷体；'font-size :30 px'个人信息展示/H2塔伯斯用户名/th @请求['用户名']/th/trtrth密码/th @请求[' PSD ']/th/trtrth确认密码/th @请求[' PSD _再次]/th/trth性别/th @ Request['性别]/th/trth籍贯/th @ Request[' native _ place ']/th @ Request[' major ']/th/trthemail/thth @ Request[' email ']/th/trth手机号/th @请求['电话]/th/trth专业擅长/th @ Request[' special ']/th/trtrth业余爱好/th @ Request['爱好]/th/trth个人照片/ththimg id=' img ' src=' http : ~/Content/UpLoad/111。png ' alt=' '//th/trth出生年月/th @请求['生日]/th/tr th备注信息/th @ Request[' more _ info ']/th/tr/tablemy _ script。射流研究…

function CheckName(){ var u=document。getelementbyid(' username ')；var t=文档。getelementbyid(' tip _ name ')；var reg=/^[a-z]{6,10}$/；if(！reg。测试(u . value)){ t . innerHTMl='用户名为6-10个小写字母；返回false } else { if(u . value==' wustzz '){ t . innerHTMl='用户名不可以为“wustzz”；返回' false}t.innerHTML='用户名填写正确；返回真；} }函数检查密码(){ var p=document。getelementbyid(' PSD ')；var t=文档。getelementbyid(' tip _ PSD ')；var reg=/^\d{6}$/；if(！reg。测试(p .值)){ t . innerHTMl='密码为6位数字；返回false} else {t.innerHTML='密码填写正确；返回真；} }函数CheckPassWordStream(){ var P1=document。GetElementBYID(' PSD ')；var p2=文档。getelementbyid(' PSD _再次');var t=文档。getelementbyid(' tip _ PSD _再次');if (p1.value！=p2.value) {t.innerHTML='密码前后不一致返回false} else {t.innerHTML='密码确认一致；返回真；} }函数检查email(){ var e=document。getelementbyid(' email ')；var t=文档。getelementbyid(' tip _ email ')；var reg=/^[\w-] (\ .[\w-] )*@[\w-] (\ .[\ w-])$/；if(！reg。测试(e . value)){ t . innerHTMl='必须填写电子邮件格式；返回false} else {t.innerHTML='Email填写正确；返回真；} }函数checkPhone(){ var p=document。getelementbyid(' phone ')；var t=文档。getelementbyid(' tip _ phone ')；var reg=/^1569\d{7}$/；if(！reg。测试(p .值)){ t . innerHTMl='手机是11位以1569开头的数字；返回false} else {t.innerHTML='填写手机正确；返回真；} }函数CheckAll(){ if(CheckName())CheckPassword()CheckPassword threat()CheckEmail()CheckPhone()){ return true；}返回false}源码地址：

http://xiazai.jb51.net/201611/yuanma/ProjectOne

以上所述是小编给大家介绍的ASP .网实现个人信息注册页面并跳转显示，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！