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

ASP.NET MVC Unobtrusive JavaScript 实现 onfocusout 验证, onfocusin 清除错误 ...

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

在 ASP.NET MVC 中启用 Unobtrusive JavaScript 功能,可以在运行时由服务器端根据Model中设置的验证规则,自动生成客户端验证js代码(结合jquery.validate)。这很好地解决了表单验证时一次代码,两次验证(客户端+服务器端)的问题。

使用它很简单,主要操作步骤如下:

1. 在web.config增加如下设置:

<appSettings>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

2. 在NuGet中引用jquery.validate与jquery.validate.unobtrusive

3. 在页面中添加js引用:

<script type="text/javascript" src="/scripts/jquery.validate.min.js"></script>       
<script src="/scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

4. 在model中添加验证规则,示例代码如下:

public class SignupUser
{
    [Required(ErrorMessageResourceName = "DefaultRequireErrorMsg", 
        ErrorMessageResourceType = typeof(Resources))]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }
}

5. 在页面中添加表单生成代码,比如:

@using(Html.BeginForm())
{   
    @Html.LabelFor(m=>m.Email)
    @Html.TextBoxFor(m=>m.Email)
    @Html.ValidationMessageFor(m=>m.Email)           
}

参考文章:Unobtrusive JavaScript in ASP.NET MVC 3

进入正题

默认情况下,jquery.validate.unobtrusive只在点击表单提交按钮时才触发验证,验证出错时,光标移入输入框不会清除错误提示信息(jquery.validate也一样,unobtrusive只是jquery.validate的一个扩展)。

而我们的需求是,只要光标移出输入框(onfocusout)就触发验证,光标移入输入框(onfocusin)时清除错误信息。

效果如下:

1. 光标移出(onfocusout)时

2. 光标移入(onfocusin)时

如何解决这个问题呢?

解决方法是简单的,找到解决方法的过程是曲折的。

jquery.validate对这个需求并没有提供很好的支持,需要研究它的代码,接管onfocusout与onfocusin的事件处理,并屏蔽onkeyup的事件处理。最终解决问题的代码如下:

针对jquery.validate.unobtrusive:

$.validator.setDefaults({
    //光标移出时
    onfocusout: function (element) {
        this.element(element);
    },
    //光标移入时
    onfocusin: function (element, event) {
        //找到显示错误提示的标签并移除,针对jquery.validate.unobtrusive
        var errorElement = $(element).next('span.field-validation-error');
        if (errorElement) {
            errorElement.children().remove();
        }
    },
    onkeyup: function (element, event) {
    }
});

如果没有使用jquery.validate.unobtrusive,想在jquery.validate中实现同样的效果,对应的代码如下:

$.validator.setDefaults({
    //光标移出时
    onfocusout: function (element) {
        this.element(element);
    },

    //光标移入时
    onfocusin: function (element, event) {
        //仅针对jquery.validate
        var errorElement = this.errorsFor(element);
        if (errorElement) {
            errorElement.remove();
        }
    },
    onkeyup: function (element, event) {
    }
});

好了,这篇博文就是为了分享一下自己摸索出来的解决方法。

 

相关博问:ASP.NET MVC 表单验证用什么好


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
asp.net 导入文本文件数据到数据库发布时间:2022-07-10
下一篇:
[导入]ASP.NET中常用的26个优化性能方法发布时间: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