主要验证的是:①用户ID是否为空
②用户ID是否已存在,如果存在则不能使用,反之则可以使用。
③用户名是否为空
④密码是否为空
⑤两次密码输入的是否一样
⑥密码长度不能小于6位
⑦在未点击“唯一验证”按钮前,“注册”按钮是不可用的,只有点了“唯一验证”按钮后,“注册”按钮才可以用
1、Models namespace 用户验证AgainAndAgain.Models { public class UserBF { private MyDBDataContext _context = new MyDBDataContext(); public bool Select(string id) //通过传进来的ID检查用户ID是否唯一,返回一个bool型的值,如果结果大于0,则为true { var query = _context.LoginUser.Where(P=>P.UserID==id); return query.Count() >0; //大于0为true } public void Insert(string UserId,string UserName,string UserPwd) //注册 { LoginUser data = new LoginUser(); data.UserID = UserId; data.UserName = UserName; data.UserPwd = UserPwd; _context.LoginUser.InsertOnSubmit(data); _context.SubmitChanges(); } } } 2、Controllers namespace 用户验证AgainAndAgain.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } public ActionResult CheckUserIdNull() //检查用户ID是否为空 { return PartialView(); } public ActionResult CheckUserId(string id) //检查用户ID是否唯一 { bool isok = new UserBF().Select(id); return PartialView(isok); //分部视图,用来显示点击唯一验证后的提示 } public ActionResult CheckUserName() //检查用户名是否为空 { return PartialView(); //分部视图,用来显示点击唯一验证后的提示 } public ActionResult CheckUserPwd() //检查用户密码是否为空 { return PartialView(); //分部视图,用来显示点击唯一验证后的提示 } public ActionResult CheckUserPwdAgain() //检查两次输入的密码是否一样 { return PartialView(); } public ActionResult Success()//这是注册成功的动作 { return PartialView(); } public ActionResult Login(string UserId,string UserName,string UserPwd) //这是点击注册的动作 { new UserBF().Insert(UserId,UserName,UserPwd); return RedirectToAction("Index","Home"); } } } 3namespace 用户验证AgainAndAgain.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } public ActionResult CheckUserIdNull() //检查用户ID是否为空 { return PartialView(); } public ActionResult CheckUserId(string id) //检查用户ID是否唯一 { bool isok = new UserBF().Select(id); return PartialView(isok); //分部视图,用来显示点击唯一验证后的提示 } public ActionResult CheckUserName() //检查用户名是否为空 { return PartialView(); //分部视图,用来显示点击唯一验证后的提示 } public ActionResult CheckUserPwd() //检查用户密码是否为空 { return PartialView(); //分部视图,用来显示点击唯一验证后的提示 } public ActionResult CheckUserPwdAgain() //检查两次输入的密码是否一样 { return PartialView(); } public ActionResult Success()//这是注册成功的动作 { return PartialView(); } public ActionResult Login(string UserId,string UserName,string UserPwd) //这是点击注册的动作 { new UserBF().Insert(UserId,UserName,UserPwd); return RedirectToAction("Index","Home"); } } } 3、Views(几个主要的) Index: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <style> .aa { position:relative; margin:auto; 500px; height:500px; } </style> </head> <body> <span id="left">主页 </span> <center><h1>用户注册</h1></center> <div class="aa"> @using(Html.BeginForm("Login","Home",FormMethod.Post)) { <table width="100%" border="1" cellpadding="4" cellspacing="1"> <tr > <td> 用户ID:@Html.TextBox("UserId") <input id="Button1" type="button" value="唯一验证" onclick="return yanzheng()" /> <span id="pd"></span> </td> </tr> <tr align="center"> <td> 用户名: @Html.TextBox("UserName") </td> </tr> <tr align="center"> <td> 密 码: @Html.Password("UserPwd") </td> </tr> <tr align="center"> <td> 确认密码:@Html.Password("UserPwdAgain") </td> </tr> <tr align="center"> <td> <input id="Submit1" type="submit" value="注册" onclick="return CheckUser()" disabled="disabled" /> </td> </tr> </table> } </div> </body> </html> <script src="~/Script/jquery-1.11.2.min.js"></script> <script > function yanzheng() //这是用来验证用户ID是否唯一的 { var x = CheckUserIdIsNull(); //验证用户ID是否为空 var a = $("#UserId").val(); //获取到ID为UserId对象的值 $("#pd").load("/Home/CheckUserId/"+a);//为Id为pd的对象加载Home控制器下的CheckUserId方法,传的参数为a var doc = document.getElementById("Submit1"); //获取到提交按钮的属性,然后把提交按钮所有的属性全部赋给doc doc.removeAttribute("disabled");//将doc里删除一个叫disabled的属性 } function CheckUser() //点击注册触发的函数 { var x = CheckUserIdIsNull(); //验证用户ID是否为空 var le = document.getElementById("UserPwd");//获取密码框的值 var a = CheckUserNameIsNull();//验证用户名是否为空 var b = CheckUserPwd();//验证密码是否为空 var c = CheckUserPwdAgain();//验证两次密码是否输入一样 if(x.length!=0) { $("#left").load("/Home/CheckUserIdNull/"); //各自转向各自的动作 return false; } else if(a.length!=0) { $("#left").load("/Home/CheckUserName/"); return false; } else if(b.length!=0) { $("#left").load("/Home/CheckUserPwd/"); return false; } else if (le.value.length<6) { alert("密码不能少于六位"); return false; } else if (c.length != 0) { $("#left").load("/Home/CheckUserPwdAgain/"); return false; } else { alert("注册成功") return true; } } function CheckUserNameIsNull()//检查用户名是否为空的函数 { var error = ""; var UserName = $("#UserName").val(); if(UserName.length==0) { error = "有长度"; } return error; } function CheckUserPwd() //检查密码是否为空,并且两次密码是否相同 { var error = ""; var UserPwd = $("#UserPwd").val(); if(UserPwd.length==0) { error = "有长度"; } return error; } function CheckUserPwdAgain()//检查两次密码输入的是否一样 { var error = ""; var UserPwd = $("#UserPwd").val(); var UserPwdAgain = $("#UserPwdAgain").val(); if(UserPwd!=UserPwdAgain) { error = "有长度"; } return error; } function CheckUserIdIsNull() //这是用来检查用户ID是否为空的 { var error = ""; var UserId = $("#UserId").val(); if(UserId.length==0) { error = "有长度"; } return error; } </script> CheckUserId: @model bool @if(Model) { <div align="center"> 对不起,此ID已存在</div> } else { <div align="center"> 恭喜你可以使用</div> } 至于其他的则是一些分部视图,只是在里面写了提示的文本,通过Jquery调用各自的动作
效果图:
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓