主要验证的是：①用户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;
width: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调用各自的动作
效果图：
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
时间： 2024-10-27 07:03:17