我只是使用 JQuery 验证来验证这个简单的表单
<form id="getting-started-form">
<label>Name</label>
<input type="text" id="txt-name" name="name" />
<br />
<label>Email</label>
<input type="text" id="txt-email" name="email" />
<button type="submit">Validate</button>
</form>
如果此表单未包含在 ng View 中，则验证工作正常，但是当我使用 ng 路由检索此模板时，验证无法使用相同的表单。
这是我的简单 HTML 页面
<!DOCTYPE html>
<html data-ng-app="ngViewValidate">
<head>
<title></title>
</head>
<body>
<div data-ng-view="">
</div>
<br />
<a href="#/ValidationTmpl">Go to validation template </a>
</body>
<script src="../Scripts/angularjs.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="../Scripts/jquery-2.0.2.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.js"></script>
<script src="JQueryValidateWithNgView.js"></script>
</html>
这是我的java脚本文件JqueryValidateWithNgView
var ngViewValidate = angular.module('ngViewValidate', ['ngRoute']);
ngViewValidate.config(function ($routeProvider , $locationProvider) {
$routeProvider.when('/ValidationTmpl',
{
templateUrl: '/WithAngular/ValidationTmpl.html'
})
})
$('#getting-started-form').validate({
rules: {
name: {
required: true
},
email: {
required: true
}
},
submitHandler: function (form) {
console.log('Valid');
},
invalidHandler: function (event, validator) {
console.log('InValid');
}
})
问题是我可以使用 ng View 中的模板进行 JQuery 验证吗？还是应该使用 Angular 验证？
最佳答案
我在 AngularJS 和 jQuery 验证插件之间创建了一座桥梁。它使用单个指令 ng-validate 来验证表单，该指令会自动检测 DOM 何时准备就绪。它还使您能够在 Controller 内定义验证选项(规则、消息等)，因此您不必为每个表单创建新指令。
尝试一下:https://github.com/jpkleemans/angular-validate 。非常感谢您的反馈!
关于jquery 验证不适用于 ng View 内的模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23707470/