Reactjs + ASP MVC非侵入式验证

Question

我有下一个代码

componentDidMount() {
    super.componentDidMount();
    let jobj = $(ReactDOM.findDOMNode(this));
    $.validator.unobtrusive.parse(jobj);
}

运行此后，我得到错误： 未捕获的TypeError：无法读取未定义的属性'unobtrusive'

我如何才能使导入ASP MVC变得不显眼并进行jquery验证？

Answer 1

从错误看来，$ .validator尚未附加。

在渲染React组件之前，请检查是否错过了jquery.validate.min.js（请参阅此处 ）。

在使用ASP.NET MVC且不打扰的情况下，这也是我最近几天一直在研究的一个问题。 让我分享一下我对此的一些初步想法：

使用React开箱即用地进行验证

从不干扰验证的工作方式来看，只要您增强JSX或TSX（Typescript v1.6 +）或使用data-val- *属性来响应脚本，那么不干扰插件将已经为您解决了难题。

var TextInputComponent = React.createClass({
    render() {        
    return (
        <div>
            <input data-val="true" data-val-required="error msg" name="Test" type="text" />
            <span className="text-danger"  data-valmsg-replace="true" data-valmsg-for="Test"></span>
        </div>
    );
}
});

问题空间

问题是我们（ASP.NET MVC开发人员）习惯于让Razor通过@ Html.TextFor（...）方法（以及其他输入类型的变体）为我们生成所有属性。 现在，我们需要将这些属性传递给ReactJS组件，以便它们知道应该如何验证特定字段。

我打算测试以下项目是否有效：

1. 使用HtmlHelper的GetUnobtrusiveValidationAttributes方法来获取与ViewModel元数据有关的所有属性。 像这样的扩展方法：

    public static IDictionary<string, object> UnobtrusiveValidationAttributesFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> propertyExpression) { var propertyName = html.NameFor(propertyExpression).ToString(); var metadata = ModelMetadata.FromLambdaExpression(propertyExpression, html.ViewData); var attributes = html.GetUnobtrusiveValidationAttributes(propertyName, metadata); return attributes; } 

2. 将此方法输出到JSON或Javascript对象中，并将其分配给Javascript变量（全局变量或作用域为ReactDOM.render方法）

3. 使用JSX传播功能将（2）中的变量包含为props。 （请参阅此处 ）

简而言之，要获得具有ASP.NET验证的完整表格，我们需要将所有必要的data-val- *信息告知ReactJS组件。