这是 JS 代码，除了表单未验证之外，一切正常。
var app = angular.module('minmax', ['jcs-autoValidate']);
app.controller('MinMaxCtrl', ['$scope', '$http', function($scope, $http){
$scope.formModel = {};
$scope.onSubmit = function(valid){
if(valid){
console.log("form submitted");
console.log($scope.formModel);
}else{
console.log("invalid form");
}
};
}]);
这是我的 HTML 页面，这里有一个表单，我想使用 Angular 自动验证进行验证。 除了表单未经验证之外，一切正常。
<!DOCTYPE html>
<html lang="en-us" ng-app="minmax">
<title>W3.CSS</title>
<head>
<title>AngularJS weathre Forecast SPA</title>
<Meta charset="UTF-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<style>
html, body, input, select, textarea
{
font-size: 1.05em !important;
}
</style>
<script src="https://code.angularjs.org/1.3.4/angular.min.js"></script>
<script src="https://cdn.rawgit.com/jonsamwell/angular-auto-validate/master/dist/jcs-auto-validate.min.js"></script>
<script src="js.js"></script>
</head>
<body >
<div class="container main-content" ng-controller="MinMaxCtrl">
<form ng-submit="onSubmit(theForm.$valid)" name="theForm" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" ng-model="formModel.name" name="name" required/>
</div>
<!--
//////////////////////////////////////// Form validation with core angularJS ///////////////////////////////////////
<div class="form-group "
ng-class="{
'has-error': !theForm.email.$valid && (!theForm.$pristine || theForm.$submitted),
'has-success': theForm.email.$valid && (!theForm.$pristine || theForm.$submitted)
}">
<label>Email</label>
<input type="email" class="form-control" name="email" ng-model="formModel.email" required/>
<p class="help-block" ng-show="theForm.email.$error.required && (!theForm.$pristine || theForm.$submitted)" >
This field is required.
</p>
<p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)" >
Please enter an email id.
</p>
<pre>Validation {{theForm.email.$error | json}}</pre>
<pre>Field Valid? {{theForm.email.$valid}}</pre>
<pre>Form pristine? {{theForm.$pristine}}</pre>
<pre>Form Submitted? {{theForm.$submitted}}</pre>
</div>-->
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" ng-model="formModel.email" required/>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" ng-model="formModel.password" required/>
</div>
<div class="form-group">
<label>Age</label>
<input type="number" class="form-control" name="Age" ng-model="formModel.age" required/>
</div>
<div class="form-group">
<label for="sex">Sex</label>
<select name="sex" id="sex" class="form-control" ng-model="formModel.sex" required>
<option value="" > Please choose </option>
<option value="Male" > Male </option>
<option value="Female" > Female </option>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Register</button>
</div>
</form>
<pre>{{theForm | json}}</pre>
</div>
</body>
最佳答案
关于javascript - 尝试使用 jonsamwell 的 Angular-Auto-validate，但表单验证不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34725674/