Heim Web-Frontend js-Tutorial Ausführliche Erläuterung der Formularvalidierung in AngularJS

Ausführliche Erläuterung der Formularvalidierung in AngularJS

Dec 06, 2016 pm 03:25 PM
angularjs

AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证

1.使用angularjs的表单验证

正则式验证

只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成

1

2

3

4

5

6

7

8

9

10

//javascript

$scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$";

$scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$";

$scope.pwdRegx = "[a-zA-Z0-9]*";

<div class="form-group">

<input class="form-control" name="mobile" type="text" ng-model="account.mobile" required ng-pattern="mobileRegx"/>

<span class="error" ng-show="registerForm.$submitted && registerForm.mobile.$error.required">*手机号不能为空</span>

<span class="error" ng-show="registerForm.$submitted && registerForm.mobile.$error.pattern">*手机号地址不合法</span>

</div>

<input type="text" ng-pattern="/[a-zA-Z]/" />

Nach dem Login kopieren

数字

设置input的type=number即可

1

2

3

4

5

6

7

8

9

10

<div class="form-group col-md-6">

<label for="password">

预估时间

</label>

<div class="input-group">

<input required type="number" class="form-control" ng-model="task.estimated_time" name="time" />

<span class="input-group-addon">分钟</span>

</div>

<span class="error" ng-show="newTaskForm.$submitted && newTaskForm.time.$error.required">*请预估时间</span>

</div>

Nach dem Login kopieren

邮箱

1

<input type="email" name="email" ng-model="user.email" />

Nach dem Login kopieren

URL

1

<input type="url" name="homepage" ng-model="user.facebook_url" />

Nach dem Login kopieren

效果

效果是实时的,很带感

Ausführliche Erläuterung der Formularvalidierung in AngularJS

2.使用ngMessages验证表单

1

2

3

4

5

6

7

8

9

10

11

12

angular.module(&#39;ngMessagesExample&#39;, [&#39;ngMessages&#39;]);

<form name="myForm">

<label>

Enter your name:

<input type="text"

name="myName"

ng-model="name"

ng-minlength="5"

ng-maxlength="20"

required />

</label>

<pre class="brush:php;toolbar:false">myForm.myName.$error = {{ myForm.myName.$error | json }}

Nach dem Login kopieren
You did not enter a field
Your field is too short
Your field is too long

简直是第二次解放啊。。。

Ausführliche Erläuterung der Formularvalidierung in AngularJS

2.动态生成的表单的验证

如果你有一部分form的内容是动态生成的,数量和名字都不确定的时候,该如何验证这些生成的元素呢?其实维护一个动态的form本来就是个问题。但是在angular中,只需要记住一点:准备好你的数据,其他的交给angular。像下面这个例子,你只需要维护好一个数组,然后利用ng-repeat就可以快速的呈现到页面上。

Ausführliche Erläuterung der Formularvalidierung in AngularJS

Ausführliche Erläuterung der Formularvalidierung in AngularJS

其实动态的form和一般的form验证都是一致的,只是动态的form需要使用myForm[inout_name].$error的形式访问

1

2

3

4

5

6

7

8

9

<!-- 动态显示状态的负责人 -->

<div class="form-group col-md-6" ng-repeat="sta in task.status_table | orderBy : sta.sequence_order">

<label>{{sta.status_name}} 负责人</label>

<select required class="form-control" ng-model="sta.user_id" ng-options="qa.id as qa.last_name+&#39; &#39;+qa.last_name for qa in taskUserList" name="{{sta.status_name}}">

</select>

<div ng-messages="newTaskForm[sta.status_name].$error" ng-if="newTaskForm.$submitted || newTaskForm[sta.status_name].$touched">

<p class="error" ng-message="required">*请选择负责人</p>

</div>

</div>

Nach dem Login kopieren

3. 必填项加亮显

有些表单我们不希望粗暴的在下面添加文字信息提示验证,而是希望更简洁的方式,如:加亮边框,突出显示

Ausführliche Erläuterung der Formularvalidierung in AngularJS

需要做的只是在required验证没通过的时候添加class,改变元素的样式即可

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<form name="loginForm" novalidate ng-submit="loginPost()" class="navbar-form navbar-right" ng-hide="login">

<fake-autocomplete></fake-autocomplete>

<div class="form-group">

<input name="user_name" required maxlength="50" type="text" class="form-control" placeholder="手机号或邮箱" ng-model="account.user_name" ng-class="{warn:loginForm.$submitted && loginForm.user_name.$error.required}">

</div>

<div class="form-group">

<input name="password" required type="password" maxlength="50" placeholder="密码" ng-model="account.password" ng-class="{&#39;form-control&#39;:1,warn:loginForm.$submitted && loginForm.password.$error.required}">

</div>

<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-lock"></span> 登录</button>

</form>

.warn {

border-color: #f78d8d !important;

outline: 0 !important;

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(239, 154, 154) !important;

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(239, 154, 154) !important;

}

Nach dem Login kopieren

   


Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Die neuesten 5 AngularJS-Tutorials im Jahr 2022, vom Einstieg bis zur Beherrschung Die neuesten 5 AngularJS-Tutorials im Jahr 2022, vom Einstieg bis zur Beherrschung Jun 15, 2017 pm 05:50 PM

Javascript ist eine sehr einzigartige Sprache, was die Organisation des Codes, das Programmierparadigma des Codes und die objektorientierte Theorie betrifft. Die Frage, ob Javascript eine objektorientierte Sprache ist, wird seit langem diskutiert Es gibt offensichtlich schon seit langem eine Antwort. Auch wenn Javascript seit zwanzig Jahren vorherrscht, schauen Sie sich einfach das „Black Horse Cloud Classroom JavaScript Advanced Framework“ an, wenn Sie beliebte Frameworks wie jQuery, Angularjs und sogar React verstehen möchten Design-Video-Tutorial“.

Verwenden Sie PHP und AngularJS, um eine reaktionsfähige Website zu erstellen und ein hochwertiges Benutzererlebnis zu bieten Verwenden Sie PHP und AngularJS, um eine reaktionsfähige Website zu erstellen und ein hochwertiges Benutzererlebnis zu bieten Jun 27, 2023 pm 07:37 PM

Im heutigen Informationszeitalter sind Websites zu einem wichtigen Instrument für Menschen geworden, um Informationen zu erhalten und zu kommunizieren. Eine responsive Website kann sich an verschiedene Geräte anpassen und den Benutzern ein qualitativ hochwertiges Erlebnis bieten, was zu einem Hotspot in der modernen Website-Entwicklung geworden ist. In diesem Artikel erfahren Sie, wie Sie mit PHP und AngularJS eine responsive Website erstellen, um ein qualitativ hochwertiges Benutzererlebnis zu bieten. Einführung in PHP PHP ist eine serverseitige Open-Source-Programmiersprache, die sich ideal für die Webentwicklung eignet. PHP bietet viele Vorteile, z. B. einfache Erlernbarkeit, plattformübergreifende Funktionalität, umfangreiche Toolbibliothek und Entwicklungseffizienz

Erstellen Sie Webanwendungen mit PHP und AngularJS Erstellen Sie Webanwendungen mit PHP und AngularJS May 27, 2023 pm 08:10 PM

Mit der kontinuierlichen Entwicklung des Internets sind Webanwendungen zu einem wichtigen Bestandteil des Informationsaufbaus in Unternehmen und zu einem notwendigen Mittel für Modernisierungsarbeiten geworden. Um die Entwicklung, Wartung und Erweiterung von Webanwendungen zu vereinfachen, müssen Entwickler ein technisches Framework und eine Programmiersprache wählen, die ihren Entwicklungsanforderungen entspricht. PHP und AngularJS sind zwei sehr beliebte Webentwicklungstechnologien. Sie sind serverseitige bzw. clientseitige Lösungen und können die Entwicklungseffizienz und das Benutzererlebnis von Webanwendungen erheblich verbessern. Vorteile von PHPPHP

Verwenden Sie PHP und AngularJS, um eine Online-Dateiverwaltungsplattform zu entwickeln, die die Dateiverwaltung erleichtert Verwenden Sie PHP und AngularJS, um eine Online-Dateiverwaltungsplattform zu entwickeln, die die Dateiverwaltung erleichtert Jun 27, 2023 pm 01:34 PM

Mit der Popularität des Internets nutzen immer mehr Menschen das Netzwerk, um Dateien zu übertragen und zu teilen. Aus verschiedenen Gründen kann die Verwendung herkömmlicher FTP- und anderer Methoden zur Dateiverwaltung jedoch nicht den Anforderungen moderner Benutzer gerecht werden. Daher ist die Einrichtung einer benutzerfreundlichen, effizienten und sicheren Online-Dateiverwaltungsplattform zu einem Trend geworden. Die in diesem Artikel vorgestellte Online-Dateiverwaltungsplattform basiert auf PHP und AngularJS. Sie kann problemlos Dateien hochladen, herunterladen, bearbeiten, löschen und andere Vorgänge ausführen und bietet eine Reihe leistungsstarker Funktionen wie Dateifreigabe, Suche,

Wie verwende ich AngularJS in der PHP-Programmierung? Wie verwende ich AngularJS in der PHP-Programmierung? Jun 12, 2023 am 09:40 AM

Mit der Popularität von Webanwendungen erfreut sich das Frontend-Framework AngularJS immer größerer Beliebtheit. AngularJS ist ein von Google entwickeltes JavaScript-Framework, das Sie beim Erstellen von Webanwendungen mit dynamischen Webanwendungsfunktionen unterstützt. Andererseits ist PHP für die Backend-Programmierung eine sehr beliebte Programmiersprache. Wenn Sie PHP für die serverseitige Programmierung verwenden, bringt die Verwendung von PHP mit AngularJS dynamischere Effekte auf Ihre Website.

Erstellen Sie eine einseitige Webanwendung mit Flask und AngularJS Erstellen Sie eine einseitige Webanwendung mit Flask und AngularJS Jun 17, 2023 am 08:49 AM

Mit der rasanten Entwicklung der Webtechnologie ist die Single Page Web Application (SinglePage Application, SPA) zu einem immer beliebter werdenden Webanwendungsmodell geworden. Im Vergleich zu herkömmlichen mehrseitigen Webanwendungen besteht der größte Vorteil von SPA darin, dass die Benutzererfahrung reibungsloser ist und auch der Rechendruck auf dem Server erheblich reduziert wird. In diesem Artikel stellen wir vor, wie man mit Flask und AngularJS ein einfaches SPA erstellt. Flask ist ein leichter Py

Einführung in die Grundlagen von AngularJS Einführung in die Grundlagen von AngularJS Apr 21, 2018 am 10:37 AM

Der Inhalt dieses Artikels befasst sich mit der grundlegenden Einführung in AngularJS. Jetzt kann ich ihn mit Ihnen teilen.

So verwenden Sie PHP und AngularJS für die Frontend-Entwicklung So verwenden Sie PHP und AngularJS für die Frontend-Entwicklung May 11, 2023 pm 05:18 PM

Mit der Popularität und Entwicklung des Internets wird die Front-End-Entwicklung immer wichtiger. Als Frontend-Entwickler müssen wir verschiedene Entwicklungstools und -technologien verstehen und beherrschen. Unter ihnen sind PHP und AngularJS zwei sehr nützliche und beliebte Tools. In diesem Artikel erklären wir, wie Sie diese beiden Tools für die Frontend-Entwicklung verwenden. 1. Einführung in PHP PHP ist eine beliebte serverseitige Open-Source-Skriptsprache. Sie eignet sich für die Webentwicklung und kann auf Webservern und verschiedenen Betriebssystemen ausgeführt werden. Die Vorteile von PHP sind Einfachheit, Geschwindigkeit und Komfort

See all articles