angulaJs 表單驗證相關

2021-07-29 11:53:26 字數 2588 閱讀 7377

angular 提供了有關表單的屬性來幫助我們驗證表單. 他們給我們提供了各種有關乙個表單及其輸入的資訊,並且應用到了表單和輸入.

屬性類描述

$valid

ng-valid

boolean 告訴我們這一項當前基於你設定的規則是否驗證通過

$invalid

ng-invalid

boolean 告訴我們這一項當前基於你設定的規則是否驗證未通過

$pristine

ng-pristine

boolean 如果表單或者輸入框沒有使用則為true

$dirty

ng-dirty

boolean 如果表單或者輸入框有使用到則為true

angular 也提供了有關表單及其輸入框的類,以便你能夠依據每乙個狀態設定其樣式.

1.確保form上標籤有乙個name屬性,像下面的例子一樣。最好再加乙個novalidate=」novalidate」

2.form中不能有action屬性。提交交由ng-submit處理

3.每個input一定要有ng-model,最好有乙個name方便引用。然後用require或者ng-minlength之類才起作用

ng預設提供了驗證

驗證是否已輸入文字,只需在標籤上加上required:

驗證至少輸入個字元,使用指令ng-minlength=「」:

驗證至多輸入個字元,使用指令ng-maxlength=「」:

確保輸入匹配乙個正規表示式,使用指令ng-pattern="/pattern/":

驗證輸入是乙個email,設定input的type屬性為email:

驗證輸入是乙個數字,設定input的type屬性為number:

驗證輸入是乙個url,設定input的type屬性為url

驗證規則

angular 有很多驗證規則,像是 tong-min leng than dng-max length.

angular還可以自己配置規則.  angular輸入指引上有說明 .

ng-model=""

name=""

required

ng-required=""

ng-minlength=""

ng-maxlength=""

ng-pattern=""

ng-change="">

input>

現在真正的好戲上演了。我們開始使用angular的屬性 。首先讓我們禁用我們的提交按鈕。如果我們的表單是$invalid的,我們只想禁用它。

...    

type="submit"

class="btn btn-primary"

ng-disabled="userform.$invalid">submitbutton>

...

只使用一點**(ng-disabled),如果我們的表單是$invalid的,表單按鈕將被禁用。 

...    

class="form-group"

ng-class="">

namelabel>

type="text"

name="name"

class="form-control"

ng-model="user.name"

required>

ng-show="userform.name.$invalid && !userform.name.$pristine"

class="help-block">you name is required.p>

div>

class="form-group"

ng-class="">

usernamelabel>

type="text"

name="username"

class="form-control"

ng-model="user.username"

ng-minlength="3"

ng-maxlength="8">

ng-show="userform.username.$error.minlength"

class="help-block">username is too short.p>

ng-show="userform.username.$error.maxlength"

class="help-block">username is too long.p>

div>

class="form-group"

ng-class="">

emaillabel>

type="email"

name="email"

class="form-control"

ng-model="user.email">

ng-show="userform.email.$invalid && !userform.email.$pristine"

class="help-block">enter a valid email.p>

div>

python表單驗證 表單驗證

django有乙個form類為我們提供了強大的表單驗證提交。1 建立form from django import forms class commentform forms.form name forms.charfield label 您的姓名 max length 100 email form...

關於表單驗證相關語句的整理

使用表單選擇器完成文字框設定 css樣式只是舉例 型別1 所有input,select,button input input css color red 型別2 單行文字框 text css color red 型別3 密碼文字框 password css color red 型別4 單選按鈕 ra...

關於表單驗證相關語句的整理

使用表單選擇器完成文字框設定 css樣式只是舉例 型別1 所有input,select,button input input css color red 型別2 單行文字框 text css color red 型別3 密碼文字框 password css color red 型別4 單選按鈕 ra...