表單必填 模板驅動表單Agnular高階程式設計(5)

2021-10-16 03:22:51 字數 2129 閱讀 5603

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 變數是否為空 通過...