jQuery.Validate.Unobtrusive 动态内容 - Javascript

简介

jQuery.Validate.Unobtrusive是一个基于jQuery的验证框架，它是ASP.NET MVC框架的一部分。jQuery.Validate.Unobtrusive通过添加data-*属性，将验证规则与HTML元素关联。

动态内容通常是通过Ajax调用从服务端加载并插入到页面中。这些内容不会在页面初始加载时存在，因此需要在插入到页面后重新解析验证规则。而jQuery.Validate.Unobtrusive提供了一种方法来解析动态内容的验证规则。

使用方法

在页面初始化时，使用以下代码重新解析验证规则：

    //解决动态生成不验证
    jQuery.validator.unobtrusive.parse(document);
    $(document).ajaxSuccess(function () {
        jQuery.validator.unobtrusive.parse(document);
    });

代码中使用了jQuery的ajaxSuccess()事件，当页面通过ajax插入动态内容时，会触发该事件，并重新解析验证规则。

示例

下面是一个简单的示例，演示了如何在动态内容中使用jQuery.Validate.Unobtrusive：

HTML：

<form action="/" data-ajax="true" data-ajax-success="onAjaxSuccess">
    <input type="text" name="username" data-val="true" data-val-required="用户名必填" />
    <input type="password" name="password" data-val="true" data-val-required="密码必填" />
    <div id="dynamicContent"></div>
    <button type="submit">提交</button>
</form>

Javascript：

$(document).ajaxSuccess(function() {
    jQuery.validator.unobtrusive.parse("#dynamicContent");
});

function onAjaxSuccess(data) {
    $("#dynamicContent").html(data);
}

在这个示例中，表单包含两个验证字段，用户名和密码。#dynamicContent元素是动态加载的内容，它会通过ajax请求从服务端获取数据。当ajax请求完成时，会触发ajaxSuccess事件，并重新解析验证规则。

结论

jQuery.Validate.Unobtrusive提供了一种简单的方法，用于解析动态内容中的验证规则。使用jQuery.Validate.Unobtrusive可以让我们更加轻松地添加验证规则，提高表单验证的准确性。