angular表單分為模板驅動表單和響應式表單。模板驅動表單採用ngmodel對模板控制項和元件變數進行繫結,適用於格式固定的表單。響應式表單使用formgroup, formcontrol,formarray,formbuilder 等類構建出資料物件,資料來源操作和表單驗證在元件邏輯中進行,適合格式不固定的表單。
然後在模板中使用[(ngmodel)]關聯元件變數。這裡使用form構建了乙個表單。novalidate表示我們自己進行驗證,不使用html5預設的表單驗證。ngsubmit是乙個表單提交事件,響應元件中的onsubmit方法。在表單內部,input我們雙向繫結了元件內部的變數str,並放置了內建的驗證器required,表示這個字段必填,還有minlength驗證器,表示最少要填入3個字元。注意這裡要用name屬性指定控制項的名稱,這是angular內部邏輯的需要。
} span> div> 提交 button> div>form>
然後我們執行程式,在瀏覽器f12介面檢查input元素,會發現如果輸入3個或以上字元,input的class為ng-dirty ng-touched ng-valid,如果輸入的字元少於3個,class則為ng-dirty ng-touched ng-invalid。angular自動加上的這些類說明如下:
ng-untouched ng-touched
一旦元素被訪問過,則為ng-touched
ng-pristine ng-dirty
元素有過更改,則為ng-dirty
ng-valid ng-invalid
元素如果不滿足驗證規則,則為ng-invalid
預設驗證器包括如下
required
必填項minlength
指定最少字元數
maxlength
指定最多字元數
pattern
輸入必須匹配正規表示式
上面的例子只是顯示紅色,但要獲取具體的錯誤型別和資訊,需要在input控制項上指定乙個模板引用變數,並賦值為ngmodel。這樣通過訪問模板引用變數的errors屬性,就可以獲取錯誤具體資訊。
} span> div> 提交 button> div> 需要輸入值 div> 最少輸入字元:} div>form>
模板引用變數有如下驗證屬性
path
返回元素名稱
valid
驗證通過,則為true
invalid
驗證不通過,則為true
prinstine
內容未更改過,則為true
dirty
內容更改過,則為true
touched
使用者訪問過此元素,為true
untouched
使用者未訪問過該元素,為true
errors
驗證不通過時,返回乙個物件,描述錯誤的資訊
value
元素value值
其中errors屬性包括
required
必填項沒有填寫
minlength.requiredlength
返回滿足minlength所需的字元數
minlength.actuallength
使用者實際輸入字數
pattern.requiredpattern
返回pattern的正規表示式
pattern.actualvalue
返回元素內容
除了對單個控制項進行驗證之外,還可以對整個表單進行驗證。這時需要對表單form元素指定乙個模板引用變數,賦值ngform,在元件檔案中,通過訪問form模板變數的valid屬性,判斷表單中是否有沒有驗證通過的控制項。只有全部控制項都驗證通過,form的valid屬性才是true。
PHP 表單驗證 必填字段
本節展示如何製作必填輸入字段,並建立需要時所用的錯誤訊息。從上一節中的驗證規則中,我們看到 name e mail 以及 gender 欄位是必需的。這些字段不能為空且必須在 html 表單中填寫。字段驗證規則 name 必需。必須包含字母和空格。e mail 必需。必須包含有效的電子郵件位址 包含...
vue elementui 實現動態必填表單項操作
實現表單項動態必填功能,目前看到方法有兩種 1.在必填的el form item 寫兩個一樣的,乙個有rules乙個沒,然後用v if去動態判斷 2.現在要說的是方法2,大部分網上看的都是用方法一的方式,而且基本都copy的文章 1 首先在data 資料定義中先定義個布林值 isipv4 true ...
form php 必填 PHP 表單驗證方法
php 表單驗證方法 php 輸入字段 在下面的.中我們增加了一些新變數 nameerr emailerr gendererr 以及 websiteerr。這些錯誤變數會儲存被請求欄位的錯誤訊息。我們還為每個 post 變數新增了乙個 if else 語句。這條語句檢查 post 變數是否為空 通過...