AngularJS verwendet ngMessages für die Formularvalidierung_AngularJS

AngularJS wurde 2009 geboren, von Misko Hevery und anderen erstellt und später von Google übernommen. Es handelt sich um ein hervorragendes Front-End-JS-Framework, das in vielen Google-Produkten verwendet wurde. AngularJS verfügt über viele Funktionen, die wichtigsten davon sind: MVVM, Modularisierung, automatisierte bidirektionale Datenbindung, semantische Tags, Abhängigkeitsinjektion usw.

Das Modul mit dem Namen „ngMessages“ wird über npm install angle-messages installiert. Bevor wir ngMessages verwenden, schreiben wir möglicherweise eine Validierung wie folgt:

<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>

Oben wird jeder mögliche Überprüfungsfehler aufgeführt und manuell geschrieben, ob die Fehlermeldung angezeigt werden soll.

Mit dem Modul „ngMessages“ lässt sich das ungefähr so ​​schreiben:

<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 bestimmt automatisch, welcher Fehler für uns angezeigt wird.

Mehrere wichtige Punkte bei der Verwendung von ngMessages:

● npm install angle-messages
● Zitat: angle-messages.js
● Abhängigkeit: angle.module('app',['ngMessages'])

Hier ist eine einfache Demo, Dateistruktur:

node_modules/
app.js
emailmessages.html
index.html

Die Installation erfolgt wie folgt:

npm install bootstrap
npm install angle
npm install angle-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

Fügen Sie die Formularbestätigung für E-Mails hier ein und zeigen Sie sie irgendwo auf der Seite über b1010a975dc5ebb8b976dafe68a17c7a16b28748ea4df4d9c2150843fecfba68 an.

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

ps: Häufig verwendete Formularvalidierungsanweisungen

1. Pflichtfeldüberprüfung

Unabhängig davon, ob eine Formulareingabe ausgefüllt wurde, fügen Sie einfach das erforderliche HTML5-Tag zum Eingabefeldelement hinzu:

Code kopieren Der Code lautet wie folgt:

59f8db9236a72a3ad223f33a52106438

2. Mindestlänge

Um zu überprüfen, ob die Textlänge der Formulareingabe größer als ein bestimmter Mindestwert ist, verwenden Sie den Befehl ng-minleng= "{number}" im Eingabefeld:

Code kopieren Der Code lautet wie folgt:

98d5fcb979fcf1c21f11fdb6e9d615a2

3. Maximale Länge

Um zu überprüfen, ob die Textlänge der Formulareingabe kleiner oder gleich einem bestimmten Maximalwert ist, verwenden Sie den Befehl ng-maxlength="{number}" im Eingabefeld:

Code kopieren Der Code lautet wie folgt:

44bcd696cf393169990dcefab9a1c0d1

4. Mustervergleich

Verwenden Sie ng-pattern="/PATTERN/", um sicherzustellen, dass die Eingabe mit dem angegebenen regulären Ausdruck übereinstimmt:

Code kopieren Der Code lautet wie folgt:

44ccc91a1cd14c1ff9a3a4b62eafbda4

5. E-Mail

Um zu überprüfen, ob es sich bei dem Eingabeinhalt um eine E-Mail handelt, stellen Sie einfach den Eingabetyp wie folgt auf E-Mail ein:

Code kopieren Der Code lautet wie folgt: 0fc2238b24406628fab06303f67dd720

6. Zahlen

Überprüfen Sie, ob der Eingabeinhalt eine Zahl ist, und legen Sie den Eingabetyp auf Zahl fest:

Code kopieren

Der Code lautet wie folgt: 1005edcba35f1e29b15d03212ac61afe

7. URL

Überprüfen Sie, ob der Eingabeinhalt eine URL ist, und legen Sie den Eingabetyp auf URL fest:

Code kopieren

Der Code lautet wie folgt: b4a4f76522ddf066026eb75900ac307e