新建一个MVC项目，利用HTML、CSS、JS、jQuery、Ajax、jQuery UI等技术设计一个个人信息注册页面。当点击“提交”按钮时，跳转到新的页面显示录入信息。
基本要求：
用户名为6-10个小写字母（小写使用正则式验证，且用户名不能为“wustzz” –通过后台用Ajax技术来检测）；密码为6位数字，确认密码不一致时有提示；籍贯使用级联（jquery实现）；Email必须符合Email格式；手机是11位（假设规定以1569开头）；出生年月使用jQuery UI日历组件设置。
视图代码：
@{
ViewBag.Title = "Index1";
}
<font size="6" face="黑体" color="red"> 请输入个人详细信息</font>
<script>
function checkpsd1() {
var u = document.getElementById("psd1");
var t = document.getElementById("tip2");
var reg = /^[0-9]{6}$/;
if (u == null || u.value.length == 0) {
t.innerHTML = "密码必填，不能为空";
}
else if (!reg.test(u.value)) {
t.innerHTML = "密码为6位数字";
}
else {
t.innerHTML = "";
}
}
function checkpsd2() {
var u = document.getElementById("psd2");
var t = document.getElementById("tip3");
var n = document.getElementById("psd1");
if (u == null || u.value.length == 0) {
t.innerHTML = "密码必填，不能为空";
}
else if (u.value != n.value) {
t.innerHTML = "密码一不致";
}
else {
t.innerHTML = "";
}
}
function checkemail() {
var u = document.getElementById("email");
var t = document.getElementById("tip4");
var reg = /^[a-zA-Z0-9_-]+@@[a-zA-Z0-9_-]+\.com$/;
if (u == null || u.value.length == 0) {
t.innerHTML = "邮箱不能为空";
}
else if (!reg.test(u.value)) {
t.innerHTML = "邮箱格式不对，例如wustzz@163.com";
}
else {
t.innerHTML = "";
}
}
function checktel() {
var u = document.getElementById("tel");
var t = document.getElementById("tip5");
var reg = /^1569[0-9]{7}$/;
if (u == null || u.value.length == 0) {
t.innerHTML = "电话号码不能为空";
}
else if (!reg.test(u.value)) {
t.innerHTML = "电话格式不对，以1569开头11位数";
}
else {
t.innerHTML = "";
}
}
</script>
@section scripts{
<script type="text/javascript">
$(document).ready(function(){ $("#dept").change(function() {
switch ($("#dept").val()) { case "": $("#major").empty(); $("#major").append("<option value=''></option>"); break;
case "1": $("#major").empty();
$("#major").append("<option value='cs'>武汉</option>");
$("#major").append("<option value='se'>荆门</option>"); break;
case "2": $("#major").empty();
$("#major").append("<option value='se'>南昌</option>");
$("#major").append("<option value='cs'>新余</option>");
break;
break; } });
});
$("#btn1").click(function () {
var str = "";
str = "姓名：" + $("#username").val() + "\n";
str += "密码：" + $("#psd1").val() + "\n";
str += "性别：" + $(":radio[name='sex']:checked").val() + "\n";
var selstr = "";
$(":checkbox[name='like']:checked").each(function () { selstr += $(this).val() + " "; });
str += "Email:" + $("#email").val() + "\n";
str += "手机号:" + $("#tel").val() + "\n";
str += "爱好：" + selstr + "\n";
str += "特长：" + selstr + "\n";
str += "出生日期:" + $("#dp").val() + "\n";
str += "照片：" + $("#myfile").val() + "\n";
str += "备注信息：" + $("#resume").val() + "\n";
alert(str);
});
$("#username").blur(function () {
var username = $("#username").val();
$.ajax({
type: "post", //以post方式与后台沟通
url: "CheckUsername", //调用action
data: "username=" + username, //传送的数据
dataType: "html", //从action返回的值以html方式解释，或用"text"
success: function (msg) { //如果调用成功，msg为后台action返回值
$('#result').html(msg);
//显示action返回值
}
});
});
</script>
<script src="~/jquery-ui-1.11.1.custom/jquery-ui.js"></script> <link href="~/jquery-ui-1.11.1.custom/jquery-ui.css" rel="stylesheet">
<script type="text/javascript"> $(document).ready(function () { $("#dp").datepicker({ dateFormat: "yy-mm-dd", inline: true }); }); </script>
}
<form method="get" οnsubmit="return check()">
用户名<input type="text" id="username" οnblur="">
<span id="result" style="color:red;"></span>
<br />
密码<input type="password" id="psd1" maxlength="6" οnblur="checkpsd1()">
<span id="tip2" style="color:red;"></span>
<br />
确认密码<input type="password" id="psd2" maxlength="6" οnblur="checkpsd2()">
<span id="tip3" style="color:red;"></span>
<br />
性别<input type="radio" name="sex" value="male" checked="checked">男
<input type="radio" name="sex" value="famale">女
<br />
籍贯
<select id="dept">
<option value=''></option>
<option value='1'>湖北</option>
<option value='2'>江西</option>
</select>
<select id="major">
<option value=''></option>
</select> <br />
邮箱<input type="email" id="email" οnblur="checkemail()">
<span id="tip4" style="color:red;"></span>
<br />
手机号<input type="tel" id="tel" οnblur="checktel()">
<span id="tip5" style="color:red;"></span>
<br />
日期<input type="text" id="dp"><br />
爱好
<input type="checkbox" name="like" value="足球">足球
<input type="checkbox" name="like" value="篮球">篮球
<input type="checkbox" name="like" value="排球">排球
<input type="checkbox" name="like" value="唱歌">唱歌
<input type="checkbox" name="like" value="其他">其他
<br />
<table border=0 >
<tr>
<td style="text-align:right;">专业擅长</td>
<td style="text-align:left;">
<select name="speciality" id="master" siae="4" multiple="multiple" style="width:500px">
<option value=".NET编程">.NET编程</option>
<option value="J2EE编程">J2EE编程</option>
<option value="Java编程">Java编程</option>
<option value="Android编程">Android编程</option>
<option value="C语言编程">C语言编程</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:right;">个人照片</td>
<td style="text-align:left;"><input id="myfile" type="file" > </td>
</tr>
<tr>
<td style="text-align:right; ">备注信息</td>
<td style="text-align:left; ">
<textarea id="resume" cols="50" rows="10">
可以补充一下
</textarea>
</td>
</tr>
</table>
<table >
<tr>
<td style="text-align:right ;"> </td>
<td style="text-align:left ; "><input type="button" value="提交" id="btn1" /></td>
<td style="text-align:left ;"><input type="reset" value="重填" /></td>
</tr>
</table>
</form>
控制器代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Mvc;
namespace 实验1.Controllers
{
public class FirstController : Controller
{
// GET: First
public ActionResult Index()
{
return View();
}
public ActionResult Index1()
{
return View();
}
public string CheckUsername(string username)
{
if (username.Equals("wustzz")) return "用户名不能为wustzz";
else if (username.Equals("")) return "用户名不能为空";
else if (!Regex.IsMatch(username, "[a-z]{6,10}") || (username.Length > 10)) return "用户名为6到10个小写字母";
else if(Regex.IsMatch(username, "[a-z]{6,10}")){ return " "; }
else return "用户名为6到10个小写字母";
}
}
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
