《angular2入門系列實踐》——表單驗證詳解
背景:
最近在itoo頁面調整的時候,發現頁面表單或者是文字框沒有做基本的判斷操作,所以著手demo一篇,希望對大家有幫助!!
1.建立表單元件:
ng g c login
2.1單規則驗證:
<label>使用者名稱:</label>
<input type="text" #userNameRef=ngModel [(ngModel)]=userName required>
<span [style.color]="userNameRef.valid ? 'black':'red'">{{userNameRef.valid }}</span>
效果:
2.2.多規則驗證:(不能為空,使用者名稱和密碼的長度)
<div class="form-group">
<label>使用者名稱:</label>
<input type="text" class="form-control" #userNameRef=ngModel minlength="3" maxlength="8" [(ngModel)]=userName required>
<span [style.color]="userNameRef.valid ? 'black':'red'" >{{userNameRef.valid}}</span>
</div>
錯誤原因提示方式:
<div class="form-group">
<label>使用者名稱:</label>
<input type="text" class="form-control" #userNameRef=ngModel minlength="3" maxlength="8" [(ngModel)]=userName required>
<span [style.color]="userNameRef.valid ? 'black':'red'" >{{userNameRef.errors|json}}</span>
<div *ngIf="userNameRef.errors?.required">this is required</div>
<div *ngIf="userNameRef.errors?.minlength">should be 3 chacaters</div>
</div>
效果:
###:初始化,沒有輸入資料:
###:輸入資料,但是長度小於3:
###:合法輸入:
當然這裡有一個問題,就是合法的時候usernameRef.errors=null,但是使用者看起來不太美觀,所以就需要判斷當usernameRef.errors=null的時不出現:
<span [style.color]="userNameRef.valid ? 'black':'red'" *ngIf="userNameRef.errors!=null">{{userNameRef.errors|json}}</span>
具體例項登陸程式碼:
<form #form="ngForm" (ngSubmit)="form.form.valid && submit(form.value)" novalidate class="form-horizontal" role="form">
<div class="form-group" [ngClass]="{ 'has-error': form.submitted && !userName.valid }">
<label class="col-sm-2 control-label">使用者名稱:</label>
<div class="col-sm-10">
<input required name="userName" [(ngModel)]="user.userName" #userName="ngModel" type="text" class="form-control" placeholder="請輸入使用者名稱...">
<div *ngIf="form.submitted && !userName.valid" class="text-danger">使用者名稱必須輸入!</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密碼:</label>
<div class="col-sm-10" [ngClass]="{'has-error': form.submitted && !password.valid }">
<input required minlength="8" maxlength="12" [(ngModel)]="user.password" name="password" #password="ngModel" type="password" class="form-control" placeholder="請輸入密碼...">
<div *ngIf="form.submitted && !password.valid" class="text-danger">密碼必須輸入,至少要8位!</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">登入</button>
</div>
</div>
</form>
login.component:
import { Component, OnInit} from '@angular/core';
import{UserModel} from '../model/user.model';//引入了usermodel
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor() { }
//定義user為Usermodel
private user=new UserModel();
ngOnInit() {
}
/**
* 登陸事件
* @param form 表單中的輸入值
*/
submit(form){
if(form.username=="1"&&form.password=="12345678"){
alert("登入成功了");
}else{
alert("非法使用者");
}
}
}
3.userModel:
export class UserModel{
userName:string;
password:string;
}
效果:
1.未填時點選登陸:
2.輸入登陸:
3.非法使用者:
結語:
感謝瀏覽,希望對你有幫助!
相關推薦
《angular2入門系列實踐》——表單驗證詳解
背景: 最近在itoo頁面調整的時候,發現頁面表單或者是文字框沒有做基本的判斷操作,所以著手demo一篇,希望對大家有幫助!! 1.建立表單元件: ng g c login
【vue】vee-validate 表單驗證詳解
Pre:安裝 npm install [email protected] 內建的校驗規則 after{target} - 比target要大的一個合法日期,格式(DD/MM/YYYY) alpha - 只包
《Angular2入門系列實踐》——實現頁面動畫效果
前言 在前端的路上越走越遠,也希望利用angular2使自己的頁面效果更加美觀,所以從官網上學習了一下 內容 1.寫animation.ts import { ani
Flask入門—Flask-WTF表單驗證
1.原始的表單驗證 頁面程式碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
JS元件系列——Form表單驗證神器: BootstrapValidator
前言:做Web開發的我們,表單驗證是再常見不過的需求了。友好的錯誤提示能增加使用者體驗。博主搜尋bootstrap表單驗證,搜到的結果大部分都是文中的主題:bootstrapvalidator。今天就來看看它如何使用吧。 一、原始碼及API地址 介紹它之前,還是給出它的原始碼以及API的地址吧。
Docker入門與實踐之 Dockerfile 語法詳解
二、指令詳解 2.1 From 指令 FROM <image> FROM <image>:<tag> FROM <image>@<digest> FROM指定構建映象的基礎源映象,如果本地沒有指定的映象,則會自動從 D
HTML5-從0開始學習之表單屬性詳解
什麼是表單? 表單是網頁中資料採集的工具。 表單組成部分由三部分組成: (一)表單標籤<form> (二)表單域<input> (三)表單按鈕<button> 現在我們來逐步解釋這三部分。 (一)表單標籤<form>
[Linux][入門系列]CentOS 的基礎命令詳解-磁碟基礎操作
[Linux][入門系列]CentOS 的基礎命令詳解-磁碟基礎操作 前言 繼上次我們安裝完CentOS之後,我們就要在CentOS進行一波操作了。OS,顧名思義,就是作業系統。既然是作業系統,那它就是可以進行一系列基礎操作的。作業系統的操作我們可以簡單的分為幾類: 1. 磁碟
《Python程式設計從入門到實踐》學習筆記詳解-專案篇(資料視覺化)
上一篇總結了《Python從入門到實踐》的第1章至第11章即基礎語法篇,這篇文章將介紹本書的專案篇之資料視覺化。 #專案一 資料視覺化 #繪製簡單的折線圖 import matplotlib.p
《Python程式設計從入門到實踐》學習筆記詳解-專案篇(API的使用)
上幾篇介紹了《Python程式設計從入門到實踐》的語法篇及2個專案篇。這篇文章介紹Python專案篇之API的使用。 #Python網路程式設計--API的使用 #執行API呼叫並處理結果 imp
《Python程式設計從入門到實踐》學習筆記詳解-專案篇(下載資料)
上兩篇文章分別介紹了《Python程式設計從入門到實踐》的語法篇和專案篇(資料視覺化),這篇文 #專案二 下載資料 #訪問並可視化csv和json這兩種常見格式儲存的資料 #csv #提取並讀取資料 import csv filename='filename.c
javascript 表單指令碼詳解
表單的基礎知識 在HTML中,表單是由<form>元素來組成的。在js中,表單對應的則是HTMLFormElement型別。它和其他HTML元素一樣具有相同的預設屬性。下面是HTMLFormElement獨有的屬性和方法: acceptCharset:伺服器能夠
Angular2 表單驗證相關
sdn bsp fps sta val http targe get art angular4響應式表單與校驗http://blog.csdn.net/xiagh/article/details/78360845?locationNum=10&fps=1 How t
[jQuery學習系列五 ]5-Jquery學習五-表單驗證
正則表達式 prevent 反選 mit 信息 只能輸入數字 event 正則表達 紅包 一,字段驗證:1.1 字段非空 <form action="" method="post" id ="myform"> <p id="error"&g
angular2 ng2-validation 表單驗證
pmo microsoft select pem normal module msm space 形式 1:安裝模塊 npm install ng2-validation --save 2:配置app.module.ts import { FormsModule, &
詳解JSR303表單驗證
一、概述 JSR-303 是 Java EE 6 中的一項子規範,叫做 Bean Validation,官方參考實現是hibernate Validator。此實現與 Hibernate ORM 沒有任何關係。 JSR 303 用於對 Java Bean 中的欄位的值進行驗證。spr
Spring Boot入門二:使用ThymeLeaf+表單驗證
Thymeleaf提供了一個用於整合Spring MVC的可選模組,在應用開發中,你可以使用Thymeleaf來完全代替JSP,或其他模板引擎,如Velocity、FreeMarker等。Thymeleaf的主要目標在於提供一種可被瀏覽器正確顯示的、格式良
基於Bootstrap+jQuery.validate Form表單驗證實踐
<!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title> <meta charset="utf-8" />
jQuery 表單驗證外掛jQuery Validation Engine用法詳解
功能強大的 jQuery 表單驗證外掛,適用於日常的 E-mail、電話號碼、網址等驗證及 Ajax 驗證,除自身擁有豐富的驗證規則外,還可以新增自定義的驗證規則。 jQuery Validatio
Laravel表單驗證例項詳解
在專案下執行命令:php artisan make:request CreateProjectRequest(隨表起一個名字) (1)執行命令後,會生成一個檔案:app/Http/Requests/CreateProjectRequest.php 修改CreateProjectRequest.