Example
<title>angularjs routing</title>
<script>
document.write (' <base href= ' + document.location + ' "/> ');
</script>
<script src= "Http://code.jquery.com/jquery-2.0.3.js" ></script>
<script src= "Http://code.angularjs.org/1.2.7/angular.js" ></script>
<script src= "Http://code.angularjs.org/1.2.7/angular-route.js" ></script>
<script src= "//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js" ></script>
<script src= "App.js" ></script>
<link rel= "stylesheet" href= "Style.css"/>
<body ng-controller= "Mainctrl" >
<form name= "Form" >
Min: <input name= "min" type= "number" ng-model= "Field.min" lower-than= "{Field.max}}"/>
<span class= "error" ng-show= "Form.min. $error. Lowerthan" >
Min cannot exceed Max.
</span>
<br/>
Max: <input name= "Max" type= "number" ng-model= "Field.max"/>
</form>
</body>
. Error {
Display:block;
font-size:12px;
color:red;
}
' Use strict ';
var app = Angular.module (' myApp ', []);
App.controller (' Mainctrl ', function ($scope) {
$scope. field = {
min:400,
max:300
};
});
App.directive (' Lowerthan ', [
function () {
var link = function ($scope, $element, $attrs, ctrl) {
var validate = function (Viewvalue) {
var Comparisonmodel = $attrs. Lowerthan;
if (!viewvalue | |!comparisonmodel) {
It ' s valid because we have nothing to compare against
Ctrl. $setValidity (' Lowerthan ', true);
}
It ' s valid if model is lower than the model we ' re comparing against
Ctrl. $setValidity (' Lowerthan ', parseint (Viewvalue) < parseint (Comparisonmodel, 10));
return viewvalue;
};
Ctrl. $parsers. Unshift (validate);
Ctrl. $formatters. push (validate);
$attrs. $observe (' Lowerthan ', function (Comparisonmodel) {
return validate (ctrl. $viewValue);
});
};
return {
Require: ' Ngmodel ',
Link:link
};
}
]);
Common form Validation Directives
1. Required Entry Verification
If a form entry is filled in, just add the HTML5 tag required on the input field element:
<input type= "text" required/>
2. Minimum length
Verify that the text length entered in the form is greater than a minimum value and use the directive ng-minleng= "{number}" on the input field:
<input type= "Text" ng-minlength= "5"/>
3. Maximum length
Verify that the text length entered in the form is less than or equal to a maximum value and that the directive ng-maxlength= "{number}" is used on the input field:
<input type= "text" ng-maxlength= "/>"
4. Pattern matching
Use ng-pattern= "/pattern/" to ensure that the input matches the specified regular expression:
<input type= "text" ng-pattern= "/[a-za-z]/"/>
5. E-Mail
Verify that the input is an e-mail message, as long as the type of input is set to email as follows:
<input type= "Email" name= "email" ng-model= "User.email"/>
6. Digital
Verify that the input is numeric and set the type of input to number:
<input type= "number" name= "Age" ng-model= "User.age"/>
7. URL
Verify that the input is a URL and set the type of input as a URL:
<input type= "url" name= "homepage" ng-model= "User.facebook_url"/>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
