首先是模型代码
public class LoginModel
{
[Required]
[Display(Name = "用户名")]
[Remote("CheckName", "Account", ErrorMessage = "用户测试")]
public string UserName { get; set; } [Required]
[DataType(DataType.Password)]
[Display(Name = "密码")]
public string Password { get; set; } [Required]
[Display(Name = "验证码")]
//[Remote("CheckValidateCode", "Account", ErrorMessage = "验证码输出错误")]
[Editable(true)]
public string ValidateNumber { get; set; }
}
控制器：
[HttpGet]
[AllowAnonymous]
[OutputCache(Location = System.Web.UI.OutputCacheLocation.None, NoStore = true)] //清除缓存
public JsonResult CheckName(string UserName)
{ if (UserName.Length > )
{
return Json(true, JsonRequestBehavior.AllowGet); }
else
{
return Json("输入太短", JsonRequestBehavior.AllowGet);
}
}
视图页
@model UMoney.Site.Models.LoginModel
@{
ViewBag.Title = "";
Layout = "~/Views/Shared/_Layout.cshtml";
} <h2>Login</h2>
@using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>“登录”表单</legend>
<ol> <li>
@Html.LabelFor(m => m.ValidateNumber)
@Html.EditorFor(m => m.ValidateNumber)
<img id="valiCode" style="cursor: pointer;" src="/Account/GetValidateCode" alt="验证码" onClick="javascript:this.src='/Account/GetValidateCode?'+ Math.random()" /> @Html.ValidationMessageFor(m => m.ValidateNumber)
</li>
<li>
@Html.LabelFor(m => m.UserName)
@Html.EditorFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
</li>
<li>
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
</li> </ol>
<input type="submit" value="登录" />
</fieldset>
<p>
@Html.ActionLink("Register", "Register") (如果你没有帐户)。
</p>
}
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval")
需要注意的是
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
引用的 JS绑定文件顺序不能颠倒
如果
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
这样，romote 远程验证将会失效。
这是页面生成的代码
<script src="/Scripts/jquery-1.4.4.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
不能颠倒的原因也是 jquery验证文件
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
不能先于 jquery主文件进行导入
<script src="/Scripts/jquery-1.4.4.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>
所以一定要注意导入顺序，我就是没注意这个问题，折腾了2个小时，崩溃！