我在客户端表单验证中有一个简单的演示HTML页面。尽管我是AngularJS的新手，但我想集成Bootstrap + AngularJS + Jquery。
我不知道为什么ng-show和ng-disabled不能按预期方式工作。当任何输入控件无效时，应该禁用Submit按钮。当相应的输入控件中的任何一个无效时，应显示错误消息。这是我的代码段。
$(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)\d\d$" 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>
答案 0 :(得分：1)
要进行角度验证，您必须在输入类型上需要ng-model，请在此处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)\d\d$" 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>
这可能对您有帮助。 谢谢