富贵资源网 Design By www.hznty.com

题目

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

基本要求:

用户名为6-10个小写字母(小写使用正则式验证,且用户名不能为“wustzz” –用Ajax技术来检测);密码为6位数字,确认密码不一致时有提示;籍贯使用级联(jquery实现);Email必须符合Email格式;手机是11位(假设规定以1569开头);出生年月使用jQuery UI日历组件设置;图片要传递到新的页面显示。

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

实现效果

(源码在文章结尾)

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

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

主要涉及知识点

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://download.csdn.net/detail/double2hao/9691584

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

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com