我在客户端表单验证中有一个简单的演示HTML页面。我想集成Bootstrap+AngularJS+Jquery，尽管我是AngularJS的新手。
我不知道为什么ng秀和ng残疾人没有按预期工作。当任何输入控件无效时，应禁用提交按钮。而当任何相应的输入控件无效时，应显示错误消息。这是我的代码片段。
$(document).ready(function(){
$("#date").datePicker();
});
var myApp = angular.module("myApp",[]);
myApp.controller('myController', function($scope){
$scope.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.myForm.$valid) {
alert('our form is amazing');
}
}
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div class="container">
<div class="row">
<div class="col-sm-6">
<form novalidate name="myForm" ng-submit="submitForm()" >
<div class="form-group">
<label>Username</label>
<input type="text" name="username" ng-minLength="3" ng-maxLength="10" placeholder="type your username" class="form-control" required></input>
<p ng-show="myForm.username.$error.$pristine" class="help-block">Username is required.</p>
<p ng-show="myForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="myForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" placeholder="type your valid email" ng-pattern="^([a-zA-Z0-9_-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([a-zA-Z0-9-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$" class="form-control" required></input>
<p ng-show="myForm.email.$error.$pristine" class="help-block">email is required.</p>
<p ng-show="myForm.email.$error.$pattern" class="help-block">Please enter valid email</p>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" placeholder="type your password" class="form-control" required></input>
<p ng-show="myForm.password.$error.$pristine" class="help-block">password is required.</p>
</div>
<div class="form-group">
<label>Date of Birth</label>
<input type="dob" name="dob" placeholder="type your valid Date of Birth" ng-pattern="^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)dd$" class="form-control" required></input>
<p ng-show="myForm.dob.$error.$pristine" class="help-block">Date of Birth is required.</p>
<p ng-show="myForm.dob.$error.$pattern" class="help-block">Please enter valid Date of Birth</p>
</div>
<button type="submit" action="/register" class="btn btn-primary" ng-disabled="myForm.$invalid">Submit</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>对于角度验证，您必须要求输入类型上的ng模型检查此处更新的plunker，
<html>
<head>
<title>Form Validation Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$("#date").datePicker();
});
</script>
<div ng-app="myApp" ng-controller="myController">
<div class="container">
<div class="row">
<div class="col-sm-6">
<form novalidate name="myForm" ng-submit="submitForm()">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" ng-model="username" minLength="3" maxLength="10" placeholder="type your username" class="form-control" required />
<span ng-show="myForm.username.$error.required" class="help-block">Username is required.</span>
<p ng-show="myForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="myForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" ng-model="email" placeholder="type your valid email" ng-pattern="^([a-zA-Z0-9_-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([a-zA-Z0-9-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$" class="form-control" required />
<p ng-show="myForm.email.$error.required" class="help-block">email is required.</p>
<p ng-show="myForm.email.$error.$pattern" class="help-block">Please enter valid email</p>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" ng-model="password" placeholder="type your password" class="form-control" required />
<p ng-show="myForm.password.$error.required" class="help-block">password is required.</p>
</div>
<div class="form-group">
<label>Date of Birth</label>
<input type="dob" name="dob" ng-model="dob" placeholder="type your valid Date of Birth" ng-pattern="^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)dd$" class="form-control" required />
<p ng-show="myForm.dob.$error.required" class="help-block">Date of Birth is required.</p>
<p ng-show="myForm.dob.$error.$pattern" class="help-block">Please enter valid Date of Birth</p>
</div>
<button type="submit" action="/register" class="btn btn-primary" ng-disabled="myForm.$invalid">Submit</button>
</form>
</div>
</div>
</div>
</div>
<script>
var myApp = angular.module("myApp", []);
myApp.controller('myController', function($scope) {
$scope.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.myForm.$valid) {
alert('our form is amazing');
}
}
});
</script>
</body>
</html>
愿这对你有所帮助。感谢