我正在使用jQuery验证库来验证使用Angular.JS创建的表单。我可以在表单中的所有静态/已知输入字段上添加验证。
除了修复输入外，我还会在表单中提出一些动态问题。这些问题将使用ng-repeat指令进行渲染。
只有在输入控件的id和name已知的情况下，我才能验证输入。在动态控制的情况下，我们无法预测相同的情况。
<body>
<div ng-controller="PersonController">
<div ng-repeat="social in formData.socials">
<ng-form name="urlForm">
<input type="url" name="socialUrl" ng-model="social.url">
<span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span>
</ng-form>
</div>
<hr>
<form id="contact-form">
<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Your email address">
</div>
</div>
<br/>
<div ng-repeat="question in Questions">
<label class="control-label" for="email">{{question.Title}}</label>
<div class="controls">
<input name="question">
</div>
<br/>
</div>
</form>
</div>
</body>
我已经检查了使用ng-form元素验证动态输入控件的方法。但我想使用jQuery验证来验证表单，因为我将使用jQuery引导程序弹出窗口，它只与jQuery验证一起使用。
angular.module('directive', []).controller('PersonController', function personController($scope) {
$scope.loading = false;
$scope.formData = {
socials: [{
url: 'http://www.valid.com'},
{
url: 'invalid url'}]
};
$scope.Questions = [
{ "Title": "Whats your name?", "Type": "Text" },
{ "Title": "Whats your birthdate?", "Type": "Date" }
];
$(document).ready(function () {
$('#contact-form').validate({
rules: {
email: {
required: true,
email: true
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
});
});
请参阅：http://plnkr.co/edit/3jiYucTKOlW4G0TISFNj?p=preview
如何为动态元素添加jQuery验证规则？请帮帮我。提前致谢。
答案 0 :(得分：-2)
我不知道你为什么要为angularJs进行jQuery验证。 Angular内置了对表单验证的支持，为您的开发提供了更大的灵活性。请参阅文档（https://docs.angularjs.org/guide/forms）