AngularJS uses ngMessages for form validation_AngularJS

AngularJS was born in 2009, created by Misko Hevery and others, and later acquired by Google. It is an excellent front-end JS framework that has been used in many Google products. AngularJS has many features, the most core of which are: MVVM, modularization, automated two-way data binding, semantic tags, dependency injection, etc.

The module named "ngMessages" is installed through 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>

The above lists each possible verification failure, and manually writes whether to display the error message.

With the "ngMessages" module, it can be written roughly like this:

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>

ngMessages automatically determines which error to display for us.

Several key points when using ngMessages:

● npm install angular-messages
● Quote: angular-messages.js
● Dependency: angular.module('app',['ngMessages'])

Here is a simple Demo, file structure:

node_modules/
app.js
emailmessages.html
index.html

Installation is as follows:

npm install bootstrap
npm install angular
npm install angular-messages

==index.html

用户名

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>


邮箱







提交

{{userForm.name.$error}}
{{userForm.email.$error}}

app.js

angular.module('app',['ngMessages'])
.controller('MainCtrl', MainCtrl);
function MainCtrl(){
}

emailmessages.html

Put the form verification about email here and display it somewhere on the page through b1010a975dc5ebb8b976dafe68a17c7a16b28748ea4df4d9c2150843fecfba68.

<p ng-message="required">邮箱必填</p>
<p ng-message="minlength">邮箱长度太短</p>
<p ng-message="maxlength">邮箱长度太长</p>
<p ng-message="email">邮箱无效</p>

ps: Commonly used form validation instructions

1. Required fields verification

Whether a form input has been filled in, just add the HTML5 required tag on the input field element:

Copy code The code is as follows:

3abc475b969093b05ef99447a5e067dd

2. Minimum length

To verify whether the text length of the form input is greater than a certain minimum value, use the command ng-minleng= "{number}" on the input field:

Copy code The code is as follows:

98d5fcb979fcf1c21f11fdb6e9d615a2

3. Maximum length

To verify whether the text length of the form input is less than or equal to a certain maximum value, use the command ng-maxlength="{number}" on the input field:

Copy code The code is as follows:

44bcd696cf393169990dcefab9a1c0d1

4. Pattern matching

Use ng-pattern="/PATTERN/" to ensure that the input matches the specified regular expression:

Copy code The code is as follows:

44ccc91a1cd14c1ff9a3a4b62eafbda4

5. Email

To verify whether the input content is an email, just set the input type to email as follows:

Copy code The code is as follows:

0fc2238b24406628fab06303f67dd720

6. Numbers

Verify whether the input content is a number and set the input type to number:

Copy code The code is as follows:

1005edcba35f1e29b15d03212ac61afe

7. URL

Verify whether the input content is a URL, set the input type to url:

Copy code The code is as follows:

b4a4f76522ddf066026eb75900ac307e