题目
新建一个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="/UploadFiles/2021-04-02/my_script.js">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="/UploadFiles/2021-04-02/111.png">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://xiazai.jb51.net/201611/yuanma/ProjectOne
以上所述是小编给大家介绍的ASP.NET实现个人信息注册页面并跳转显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 黑鸭子2005-紫丁香[首版][WAV+CUE]
- 林忆莲《爱上一个不回家的人》XRCD版[低速原抓WAV+CUE][999M]
- 经典《历届奥斯卡金曲回顾》[正版原抓WAV+CUE] [1G]
- 群星《试音草原·女声篇》经典蒙古民歌[WAV+CUE][1G]
- 炉石传说月末上分卡组推荐 国服月末最快上分卡组推荐
- 炉石传说月底最强卡组有哪些 2024国服月底最强卡组推荐
- 炉石传说月初最强卡组有哪些 2024月初最强上分卡组推荐
- 狼人杀亮相原生鸿蒙之夜 假面科技强势登陆华为生态
- 12小时光线挑战!AI画质专家才是大平层首选
- 2024游戏IP报告:1~9月规模1960亿 68%用户愿为之付费
- 群星.2024-今夜一起为爱鼓掌电视剧原声带【相信音乐】【FLAC分轨】
- BIGFOUR.2013-大家利事【寰亚】【WAV+CUE】
- 李美凤.1992-情深透全情歌集【EMI百代】【WAV+CUE】
- 田震2024-《时光音乐会》[金峰][WAV+CUE]
- 群星《监听天碟3》[LECD]限量版[WAV+CUE]