angular表單驗證

Cristalven 發布于2019-08-21 11:45 / 1321人閱讀

摘要：如果想要屏蔽瀏覽器對表單的默認驗證行為，可以在表單元素上添加標記。如果未修改，值為，如果修改過值為修改過的表單只要用戶修改過表單，無論輸入是否通過驗證，該值都返回合法的表單這個布爾型的屬性用來判斷表單的內容是否合法。

借助AngularJS，我們不需要花太多額外的精力就可以輕松實現客戶端表單驗證功能。雖然 Web應用安全不能完全依賴客戶端驗證，但客戶端驗證可以提供表單狀態的實時反饋。
要使用表單驗證，首先要確保表單有一個name屬性。
所有輸入字段都可以進行基本的驗證，比如最大、最小長度等。這些功能是由新的HTML5 表單屬性提供的。
如果想要屏蔽瀏覽器對表單的默認驗證行為，可以在表單元素上添加novalidate標記。
下面看一下可以在input元素上使用的所有驗證選項。

必填項
驗證某個表單輸入是否已填寫，只要在輸入字段元素上添加HTML5標記required即可：

最小長度
驗證表單輸入的文本長度是否大于某個最小值，在輸入字段上使用AngularJS指令ng-minleng= "{number}"：

最大長度
驗證表單輸入的文本長度是否小于或等于某個最大值，在輸入字段上使用AngularJS指令 ng-maxlength="{number}"：

模式匹配
使用ng-pattern="/PATTERN/"來確保輸入能夠匹配指定的正則表達式：

電子郵件
驗證輸入內容是否是電子郵件，只要像下面這樣將input的類型設置為email即可：

數字
驗證輸入內容是否是數字，將input的類型設置為number：

URL
驗證輸入內容是否是URL，將input的類型設置為 url：

在表單中控制變量
表單的屬性可以在其所屬的$scope對象中訪問到，而我們又可以訪問$scope對象，因此 JavaScript可以間接地訪問DOM中的表單屬性。借助這些屬性，我們可以對表單做出實時（和 AngularJS中其他東西一樣）響應。這些屬性包括下面這些。

   未修改的表單    formName.inputFieldName.$pristine   
   這是一個布爾屬性，用來判斷用戶是否修改了表單。如果未修改，值為true，如果修改過值為false；
    
   修改過的表單    formName.inputFieldName.$dirty
   只要用戶修改過表單，無論輸入是否通過驗證，該值都返回true：
    
   合法的表單     formName.inputFieldName.$valid
   這個布爾型的屬性用來判斷表單的內容是否合法。如果當前表單內容是合法的，下面屬性的 值就是true：
    
   不合法的表單    formName.inputFieldName.$invalid 
   這個布爾屬性用來判斷表單的內容是否不合法。如果當前表單內容是不合法的，下面屬性的 值為true：
    
   錯誤   formName.inputfieldName.$error
   如果驗證失敗，這個屬性的值為true；如果值為false，說明輸入字段的值通過了驗證。

下面結合具體的例子，來運用上面的屬性


        
            用 戶 名：
            

        
        
            用戶名不能為空
                
                用戶名長度應該在5-10位之間
            
        
        
            密    碼：
            

        
        
            
                密碼不能為空
            
                
                密碼長度應該在6-10位之間
            
        
        
            重復密碼：
            
 
        
         
            
                兩次密碼輸入不一致
            
        
        
            郵 箱：
            

        
        
            
                郵箱格式錯誤
            
        
        
            手機號碼：
            

        
        
            
                手機號碼格式錯誤

云服務器 GPU云服務器驗證表單表單驗證表單驗證代碼表單驗證實例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87081.html

angular表單驗證2

摘要：表單驗證使用場景在實際的開發中我們可能會有這樣的情況。姓名不能為空姓名太短姓名太長姓名不能為空姓名太短姓名太長借助表單本身比之前的更簡單了。結尾以上就是關于表單驗證的全部內容。前言在之前的文章《angular表單驗證》中主要介紹了一些關于angular表單驗證的基礎知識。在此篇中將著重以擴展angular表單驗證的相關內容和實際開發中的應用為主。表單驗證使用場景1 在實際的開發...

darkbug 2019-08-19 17:41 評論0 收藏0
angular4 學習記錄 -- 表單

摘要：在表單上添加的會攔截標準的表單提交事件。并為它們提供了一些共同的行為和屬性，其中有些是可觀察對象。用于跟蹤一個單獨的表單控件的值和有效性狀態。組件中的頂級表單就是一個。在表單所在的中的上添加，再在指定的驗證方法中調用來顯示驗證失敗信息。 angular4 表單模板表單在app.module中導入FormsModule之后，項目中的form表單都會是一個ngForm，也就是一個模板表...

james 2019-08-21 16:45 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

alogy 2019-08-29 16:54 評論0 收藏0
angular6的響應式表單

摘要：在模塊里面引入要使用響應式表單，就要從包中導入，并把它添加到你的的數組中。導入驗證器函數響應式表單包含了一組開箱即用的常用驗證器函數。這些驗證器屬性可以和響應式表單提供的內置驗證器組合使用。 1：在AppModule模塊里面引入 ReactiveFormsModule 要使用響應式表單，就要從@angular/forms包中導入ReactiveFormsModule，并把它添加到你的N...

hzc 2019-08-02 11:40 評論0 收藏0