• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

Asp.NetCore客户端验证和远程验证

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  我们先来看这样一个注册页面和它的后台Model

@model RegisterViewModel

@{
    ViewBag.Title = "用户注册";
}

<h1>用户注册</h1>
<div class="row">
    <div class="col-md-12">
        <form method="post">
            <div asp-validation-summary="All" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Email"></label>
                <input asp-for="Email" class="form-control" />
                <span asp-validation-for="Email" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Password"></label>
                <input asp-for="Password" class="form-control" />
                <span asp-validation-for="Password" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ConfirmPassword"></label>
                <input asp-for="ConfirmPassword" class="form-control" />
                <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="City"></label>
                <input asp-for="City" class="form-control" />
            </div>

            <button type="submit" class="btn btn-primary">注册</button>
        </form>
    </div>
</div>
    public class RegisterViewModel
    {
        [Required]
        [Display(Name = "邮箱地址")]
        [EmailAddress]
        [Remote(action: "IsEmailInUse", controller: "Account")]public string Email { get; set; }

        [Required]
        [Display(Name = "密码")]
        [DataType(DataType.Password)]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "确认密码")]
        [Compare("Password",
            ErrorMessage = "密码与确认密码不一致,请重新输入.")]
        public string ConfirmPassword { get; set; }



        public string City { get; set; }
    }

  如果我们点击了注册,校验过程是发送了请求到服务器,在服务器端进行校验,这在某个程度上来说影响了用户体验和系统性能。所以我们需要在提交到服务器前先在客户端进行验证。那么怎么做呢,在Asp.Net Core上很简单。

  实现客户端校验只需要添加三个js库即可,分别是:

  <script src="~/lib/jquery/jquery.js"></script>
  <script src="~/lib/jquery-validate/jquery.validate.js"></script>
  <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js">

  我们可以通过libman来很方便的添加:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/twitter-bootstrap/"
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/jquery-validate/"
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
    }
  ]

  而有些时候在注册的时候需要检测所填入的邮箱是否已经被使用,这通常是使用Ajax来进行验证,当然,在Asp.Net Core中,这个验证写法变得异常简单,同样的是需要前面三个js库,然后需要做的是在模型的Email字段上添加属性 

[Remote(action: "IsEmailInUse", controller: "Account")]

  然后创建对应的controller和action

[AcceptVerbs("Get", "Post")]
[AllowAnonymous]
public async Task<IActionResult> IsEmailInUse(string email)
{
    var user = await userManager.FindByEmailAsync(email);

    if (user == null)
    {
        return Json(true);
    }
    else
    {
        return Json($"邮箱: {email} 已经被注册使用了。");
    }
}

  这样就可以了。

 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
C#与mysql做ASP.NET网页数据库查询速度测试发布时间:2022-07-10
下一篇:
asp.net水晶报表VS200810.5版本发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap