角度 2 中的 jquery 验证引擎

Question

如何在 angular 2 中使用 jquery 验证引擎？我在索引中包含 jquery 验证文件.html文件：

<script src="http://localhost/2017/js2/jquery.validationEngine.js" type="text/javascript"></script>
<script src="http://localhost/2017/js2/jquery.validationEngine-en.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://localhost/2017/css2/validationEngine.jquery.css">

并在 angular 2 中安装了 jquery(使用 npm install --save jquery 和：

npm install @types/jquery@2.0.47 --save-dev )

现在它仍然不起作用。

form code <br>`<form id="idofurform" name="idofurform">
<input id="stdname" class="validate[ required,custom[onlyLetterNumber]] text-input form-control" type="text" name="stdname" placeholder="student name">
<!--onkeyup = "onlyNumbers(this.id,0,25)"-->
<input id="stdage" type="number" name="stdage" class="validate[custom[onlyNumberSp], required, custom[number],min[10],max[25]] form-control" placeholder="student age">
<input class="validate[ required, custom[email]] form-control" type="email" id="stdemail" name="stdemail" placeholder="student email">
<!-- onkeyup = "onlyNumbers(this.id,0,1000000000000)" -->
<input maxlength="10" class="validate[custom[onlyNumberSp],required,maxSize[10],minSize[10], custom[phone]] text-input form-control" name="stdphone" id="stdphone" type="phone" name="stdphone" class="form-control">
</form>

我的 TS 代码

constructor(){
$(document).ready(function(){
$("#idofurform").validationEngine();
});
}

它显示错误 [ts] 属性"验证引擎"在类型"JQuery"上不存在。

错误在/home/midhilaj/Desktop/angularhost3/src/app/components/home.component.ts (25,23(：属性"validationEngine"在类型"JQuery"上不存在。 webpack：编译失败

Answer 1

我终于找到了解决方案。
步骤1：在索引.html文件中添加所需的文件

<script src="assets/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="assets/jquery.validationEngine.js" type="text/javascript"></script>
<script src="assets/jquery.validationEngine-en.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/validationEngine.jquery.css">

第 2 步：我的应用组件.html文件

<form id="idofurform" name="idofurform">
<input id="stdname" class="validate[ required,custom[onlyLetterNumber]] text-input form-control" type="text" name="stdname" placeholder="student name">
<!--onkeyup = "onlyNumbers(this.id,0,25)"-->
<input id="stdage" type="number" name="stdage" class="validate[custom[onlyNumberSp], required, custom[number],min[10],max[25]] form-control" placeholder="student age">
<input class="validate[ required, custom[email]] form-control" type="email" id="stdemail" name="stdemail" placeholder="student email">
<!-- onkeyup = "onlyNumbers(this.id,0,1000000000000)" -->
<input maxlength="10" class="validate[ custom[onlyNumberSp],required,maxSize[10],minSize[10], custom[phone]] text-input form-control" name="stdphone" id="stdphone" type="phone" name="stdphone" class="form-control">

第 3 步：app.comonent.ts 文件

import { Component } from '@angular/core';
declare var $:any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
constructor(){
(<any>$(document)).ready(function() {
(<any>$("#idofurform")).validationEngine();                       
});
}
}
check() {   
(<any>$(document)).ready(function() {
// (<any>$("#idofurform")).validationEngine();
(<any>jQuery("#idofurform")).validationEngine('attach', {bindMethod:"live"});
});
return $("#idofurform").validationEngine('validate');
}

裁判