.NET MV4 Remote远程验证注意事项及案例
首先是模型代码
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 > 10) { 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个小时,崩溃!