angular form validation

最新推荐文章于 2024-01-20 15:17:19 发布

Esengnet

最新推荐文章于 2024-01-20 15:17:19 发布

阅读量1.2k

点赞数

分类专栏： javascript(jquery | angualry)

本文链接：https://blog.csdn.net/Esengnet/article/details/22102901

版权

javascript(jquery | angualry) 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1. create a html file like as below

<!DOCTYPE html>
<html>
<head>



<style>
body { padding-top:30px; }
</style>



<script src="../angular.js"></script>
<script src="app.js"></script>
</head>


<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">


<div class="page-header"><h1>AngularJS Form Validation</h1></div>



<form name="userForm" novalidate > 


<div class="form-group2" >
<label>Name</label>
<input type="text" name="name" ng-model="name" required> *
<label ng-show="(userForm.name.$invalid && !userForm.name.$pristine ) || (submitted && userForm.name.$error.required)">required</label>
</div>

<!-- $pristine = ng-pristine -> form/input element has not been used yet

$dirty = ng-dirty -> form/input element has already been used

$invalid = ng-invalid -> form/input element is invalid

$valid = ng-valid -> form/input element is valid

-->

<div class="form-group">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" required >
</div>




<button name="submit" ng-click="submitForm(userForm.$valid)" class="btn btn-primary">Submit</button>

</form>

</div>
</div>
</body>

</html>

2. create js file like as below

/* ------------------------app.js ------------------- */

// create angular app
var validationApp = angular.module('validationApp', []);

// create angular controller
validationApp.controller('mainController', function($scope) {

// function to submit the form after all validation has occurred
$scope.submitForm = function() {
$scope.submitted=true; // form will validate after click "submit" button
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {

alert('our form is amazing');

}else{

alert("please input required fields");

}
};
});