angularjs學習第四天筆記（第一篇：簡單的表單驗證）

angularjs表單驗證，今天主要學習了angularjs中的表單驗證的一些基本概念及其簡單應用（簡單的實現註冊表單驗證） ...

您好，我是一名後端開發工程師，由於工作需要，現在系統的從0開始學習前端js框架之angular，每天把學習的一些心得分享出來，如果有什麼說的不對的地方，請多多指正，多多包涵我這個前端菜鳥，歡迎大家的點評與賜教。謝謝！

　　第四天，簡單的表單驗證，今天主要學習了angularjs中的表單驗證的一些基本概念及其簡單應用

　　第一、表單驗證的簡單理解

　　　　表單驗證是angularjs中比較重要的一個核心功能

　　　　表單驗證可以結合html5的驗證特殊使用，當然也可以禁用瀏覽器對錶單的預設驗證，添加屬性【novalidate】即可

　　　　表單驗證畢竟只是前端js驗證，在後端代碼中一定需要對其數據的合法性做再次驗證

　　　　angularjs提供了一些常見的系統驗證，當然也可以自定義表單驗證

　　第二、簡單瞭解學習anjularjsz自帶的表單驗證

　　　　1.必填驗證：required，直接添加required屬性即可

　　　　2.最小長度：ng-minlength，使用ng-minlength=“最小長度值”

　　　　3.最大長度：ng-maxlength,使用ng-maxlength=“最大長度值”

　　　　4.模式匹配：ng-pattern，使用ng-pattren="模式匹配的正則表達式"

　　　　5.郵箱：email,使用直接給文本框的type屬性值賦值為email即可--type="email"

　　　　6.數字：number,使用直接給文本框的type屬性值賦值為number即可--type="number"

　　　　7.網頁地址：url,使用直接給文本框的type屬性值賦值為url即可--type="url"

　　第四、表單中的控制變數

　　　　1.表單的屬性值訪問方式為：表單名稱.文本框名稱.屬性名稱

　　　　2.表單驗證中用到的表單屬性包括如下：

　　　　　　未修改的表單：屬性名稱關鍵詞【pristine】，bool類型，如果為修改為ture

　　　　　　用戶修改過的表單：屬性關鍵詞【dirty】,bool類型,只有修改了就為true

　　　　　　合法的表單：屬性關鍵詞【valid】，bool類型，只有當表單內容合法才為true

　　　　　　不合法表單：屬性關鍵詞【invalid】，bool類型，只要有不合法的都為true

　　　　　　錯誤：屬性關鍵詞【error】,bool類型，只要有不合法的都為true

　　第五、簡單實現註冊頁面的表單驗證

　　　　在實現的方式上，根據不同的體驗，大致有三種方式

　　　　其一、對錶單輸入實時驗證，只有表單驗證都通過，才提交表單

　　　　　　　實現方式：通過控制提交按鈕的可用性來實現

　　　　　　　　　　　　　　ng-disabled="loginForm.$invalid"

　　　　　　下麵舉例一個練習實例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .oneCount {
            width:1000px;
            height:60px;
            line-height:60px;
            border-bottom:1px solid blue;
        }
            .oneCount .titleCount {
                float: left;
                width: 150px;
                text-align: right;
            }

            .oneCount .valueCount {
                float: left;
                width: 300px;
                text-align: right;
            }
                .oneCount .valueCount input {
                    width: 300px;
                }

            .oneCount .alertCount {
                float: left;
                width: 520px;
                margin-left:20px;
            }

            .oneCount .alertCount span{
                float: left;
                margin-left: 10px;
                color:#ff0000;
            }

        .success {
        color:#19e1cf !important;
        }

        input .ng-pristine {
            color: #808080;
            border-bottom: 1px solid #ff0000;
        }
        input .ng-dirty {
            color: #000000;
        }
        input .ng-valid {
            color: #000000;
        }
        input .ng-invalid {
            color: #ff0000;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="myContro">
    <form name="loginForm" novalidate ng-submit="submitForm()">
        <div class="oneCount">
            <div class="titleCount">賬號：</div>
            <div class="valueCount"> 
                <input type="text" name="acount" ng-model="user.acount" placeholder="必填：賬號必須由數字字母組合，長度在6-20"
                       required="required" ng-minlength="6" ng-maxlength="20" ng-pattern="/^[0-9a-zA-Z]+$/"/>
            </div>
            <div class="alertCount">
                <span class="warning">*</span>
                <span class="warning" ng-show="loginForm.acount.$dirty&&loginForm.acount.$error.required">acount必填</span>
                <span class="warning" ng-show="loginForm.acount.$error.minlength">最少長度為6</span>
                <span class="warning" ng-show="loginForm.acount.$error.maxlength">最大長度為20</span>
                <span class="warning" ng-show="loginForm.acount.$error.pattern">賬號格式不符合要求（只能由數字和字母組成）</span>
                <span class="success" ng-show="loginForm.acount.$dirty&&loginForm.acount.$valid">賬號輸入正確</span>
            </div>
        </div>
        <div class="oneCount">
            <div class="titleCount">姓名：</div>
            <div class="valueCount">
                <input type="text" name="name" ng-model="user.name" placeholder="請輸入姓名" ng-maxlength="20" />
            </div> 
            <div class="alertCount">
                <span class="warning" ng-show="loginForm.name.$error.maxlength">姓名最大長度為20</span>
                <span class="success" ng-show="loginForm.name.$dirty&&loginForm.name.$valid">姓名輸入正確</span>
            </div>
            </div>
            <div class="oneCount">
                <div class="titleCount">年齡：</div>
                <div class="valueCount">
                    <input type="number" name="age" ng-model="user.age" placeholder="請輸入年齡" />
                </div>
            </div>
            <div class="oneCount">
                <div class="titleCount">密碼：</div>
                <div class="valueCount">
                    <input type="password" name="pass" ng-model="user.pass" placeholder="必填：請輸入密碼，密碼長度在6-20"
                           required="required" ng-minlength="6" ng-maxlength="20" />
                </div>
                <div class="alertCount">
                    <span class="warning">*</span>
                    <span class="warning" ng-show="loginForm.pass.$dirty&&loginForm.pass.$error.required">密碼必填</span>
                    <span class="warning" ng-show="loginForm.pass.$error.minlength">最少長度為6</span>
                    <span class="warning" ng-show="loginForm.pass.$error.maxlength">最大長度為20</span>
                    <span class="success" ng-show="loginForm.pass.$dirty&&loginForm.pass.$valid">密碼輸入正確</span>
                </div>
                <div class="oneCount">
                    <div class="titleCount"></div>
                    <div class="valueCount">
                        <input type="submit" value="提交" ng-disabled="loginForm.$invalid" style="width:40px;" />
                    </div>
                </div>
</form>
</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myContro", function ($scope) {
        $scope.user = {
            acount: "",
            name: "",
            age: "",
            pass: "",
            rePass: ""
        };

        //提交表單接受函數
        $scope.submitForm = function () {
           //// 表單真實提交邏輯
            alert("提交表單");
        }
    });

</script>

　　　　其二、先觸發提交表單事件，在統一對錶單數據驗證，只有同驗證通過才提交數據到後臺處理

　　　　　　　實現方式：可以給表單添加一個屬性，初始化賦值為false，只有提交後才賦值為ture

　　　　　　　　　　　　驗證結果提示信息，只有該屬性值為true,才顯示顯示錯誤信息

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .oneCount {
            width:1000px;
            height:60px;
            line-height:60px;
            border-bottom:1px solid blue;
        }
            .oneCount .titleCount {
                float: left;
                width: 150px;
                text-align: right;
            }

            .oneCount .valueCount {
                float: left;
                width: 300px;
                text-align: right;
            }
                .oneCount .valueCount input {
                    width: 300px;
                }

            .oneCount .alertCount {
                float: left;
                width: 520px;
                margin-left:20px;
            }

            .oneCount .alertCount span{
                float: left;
                margin-left: 10px;
                color:#ff0000;
            }

        .success {
        color:#19e1cf !important;
        }

        input .ng-pristine {
            color: #808080;
            border-bottom: 1px solid #ff0000;
        }
        input .ng-dirty {
            color: #000000;
        }
        input .ng-valid {
            color: #000000;
        }
        input .ng-invalid {
            color: #ff0000;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="myContro">
    <form name="loginForm" novalidate ng-submit="submitForm()">
        <div class="oneCount">
            <div class="titleCount">賬號：</div>
            <div class="valueCount"> 
                <input type="text" name="acount" ng-model="user.acount" placeholder="必填：賬號必須由數字字母組合，長度在6-20"
                       required="required" ng-minlength="6" ng-maxlength="20" ng-pattern="/^[0-9a-zA-Z]+$/"/>
            </div>
            <div class="alertCount">
                <span class="warning">*</span>
                <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$dirty&&loginForm.acount.$error.required">acount必填</span>
                <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.minlength">最少長度為6</span>
                <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.maxlength">最大長度為20</span>
                <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.pattern">賬號格式不符合要求（只能由數字和字母組成）</span>
                <span class="success" ng-show="loginForm.submitted&&loginForm.acount.$dirty&&loginForm.acount.$valid">賬號輸入正確</span>
            </div>
        </div>
        <div class="oneCount">
            <div class="titleCount">姓名：</div>
            <div class="valueCount">
                <input type="text" name="name" ng-model="user.name" placeholder="請輸入姓名" ng-maxlength="20" />
            </div> 
            <div class="alertCount">
                <span class="warning" ng-show="loginForm.submitted&&loginForm.name.$error.maxlength">姓名最大長度為20</span>
                <span class="success" ng-show="loginForm.submitted&&loginForm.name.$dirty&&loginForm.name.$valid">姓名輸入正確</span>
            </div>
            </div>
        <div class="oneCount">
                <div class="titleCount">年齡：</div>
                <div class="valueCount">
                    <input type="number" name="age" ng-model="user.age" placeholder="請輸入年齡" />
                </div>
            </div>
        <div class="oneCount">
                <div class="titleCount">密碼：</div>
                <div class="valueCount">
                    <input type="password" name="pass" ng-model="user.pass" placeholder="必填：請輸入密碼，密碼長度在6-20"
                           required="required" ng-minlength="6" ng-maxlength="20" />
                </div>
                <div class="alertCount">
                    <span class="warning">*</span>
                    <span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$dirty&&loginForm.pass.$error.required">密碼必填</span>
                    <span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$error.minlength">最少長度為6</span>
                    <span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$error.maxlength">最大長度為20</span>
                    <span class="success" ng-show="loginForm.submitted&&loginForm.pass.$dirty&&loginForm.pass.$valid">密碼輸入正確</span>
                </div>
                <div class="oneCount">
                    <div class="titleCount"></div>
                    <div class="valueCount">
                        <input type="submit" value="提交" style="width:40px;" />
                    </div>
                </div>
            </div>
</form>
</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myContro", function ($scope) {
        $scope.user = {
            acount: "",
            name: "",
            age: "",
            pass: "",
            rePass: ""
        };
        $scope.submitted = false;
        //提交表單接受函數
        $scope.submitForm = function () {
            if ($scope.loginForm.$valid) {
                //// 表單數據真實提交邏輯
            } else {
                $scope.loginForm.submitted =