Angularjs was born in 2009, by Misko Hevery and other people to create, after the acquisition of Google. is an excellent front-end JS framework, has been used in a variety of Google products. Angularjs has many characteristics, the most core is: MVVM, modular, automated two-way data binding, semantic tagging, dependency injection and so on.
A module named "Ngmessages" is installed through the NPM install Angular-messages. Before using ngmessages, we might write validation like this:
<form name= "UserForm" > <input type= "text" name= "username" ng-model= "User.username" ng-minlength= "3" ng-maxlength= "8" required> <p ng-show= "userform.username.$ Error.minlength ">username is too short.</p> <p ng-show=" Userform.username " $error. MaxLength" > Username is too long.</p> <p ng-show= "userform.username. $error. Required" >your Username is required. </p> </form>
Above, enumerate each possible validation failure and manually write whether to display the error message.
With the "ngmessages" module, this is roughly what it says:
<div class= "Help-block" ng-messages= userform.name. $error "ng-if=" Userform.name. $touched "> <p Ng-message= "minlength" > Username Minimum length 5</p> <p ng-message= "maxlength" > Username maximum length 10</p> Ng-message= "required" > Username required </p> </div>
Ngmessages for us to automatically determine what kind of error to display.
Several key points for using ngmessages:
NPM Install Angular-messages
Reference: Angular-messages.js
Dependencies: Angular.module (' app ', [' ngmessages '])
Here is a simple demo, file structure:
node_modules/
App.js
Emailmessages.html
Index.html
The installation is as follows:
NPM Install bootstrap
NPM Install angular
NPM Install Angular-messages
==index.html
<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> </ title>
<link rel = "stylesheet" href = "node_modules / bootstrap / dist / css / bootstrap.min.css" />
<style>
body {
padding-top: 50px;
}
</ style>
</ head>
<body class = "container" ng-app = "app" ng-controller = "MainCtrl as main">
<form name = "userForm" novalidate>
<div class = "form-group" ng-class = "{'has-error': userForm.name. $ touched && userForm.name. $ invalid}">
<label> username </ label>
<input type = "text" name = "name" class = "form-control"
ng-model = "main.name"
ng-minlength = "5"
ng-maxlength = "10" required />
<div class = "help-block" ng-messages = "userForm.name. $ error" ng-if = "userForm.name. $ touched">
<p ng-message = "minlength"> Minimum length of username 5 </ p>
<p ng-message = "maxlength"> Max username length 10 </ p>
<p ng-message = "required"> User name is required </ p>
</ div>
</ div>
<div class = "form-group" ng-class = "{'has-error': userForm.email. $ touched && userForm.email. $ invalid}">
<label> Email </ label>
<input type = "email" name = "email" class = "form-control"
ng-model = "main.email"
ng-minlength = "5"
ng-maxlength = "20" required />
<div class = "help-block" ng-messages = "userForm.email. $ error" ng-if = "userForm.email. $ touched">
<div ng-messages-include = "emailmessages.html"> </ div>
</ div>
</ div>
<div class = "form-group">
<button type = "submit" class = "btn btn-danger"> Submit </ button>
</ div>
<pre> {{userForm.name. $ error}} </ pre>
<pre> {{userForm.email. $ error}} </ pre>
</ form>
<script src = "node_modules / angular / angular.min.js"> </ script>
<script src = "node_modules / angular-messages / angular-messages.js"> </ script>
<script src = "app.js"> </ script>
</ body>
</ html>
App.js
Angular.module (' app ', [' ngmessages '])
. Controller (' Mainctrl ', Mainctrl);
function Mainctrl () {
}
Emailmessages.html
Put the email form validation here, through the <div ng-messages-include= "emailmessages.html" ></div> show it to a location on the page.
<p ng-message= "required" > Mailbox must fill </p> <p ng-message= "minlength" > Mailbox length is too short </p> <p Ng-message= "MaxLength" > Mailbox length is too long </p> <p ng-message= "email" > Mailbox Invalid </p>
PS: 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:
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:
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:
4. Pattern matching
Use ng-pattern= "/pattern/" to ensure that the input matches the specified regular expression:
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:
6. Digital
Verify that the input is numeric and set the type of input to number:
7. URL
Verify that the input is a URL and set the type of input as a 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
