AngularJS表單驗(yàn)證

AngularJS表單驗(yàn)證---慕課網(wǎng)視頻http://www.imooc.com/learn/505

代碼：https://github.com/kakukeme/angularJS-demo.git

Angularjs 指令；

  • 1、理解$scope在Angular中的意義；
  • 2、掌握angular基礎(chǔ)指令；
  • 3、熟練配合各組件對(duì)表單進(jìn)行動(dòng)態(tài)驗(yàn)證；

ng-model

angularjs.org

angularjs、bootstrap、jquery

angular.module('myApp', [])
[]空數(shù)組，不需要注入什么其他依賴；

Angularjs 基礎(chǔ)指令

1、ng-model

ng-model 雙向綁定
<input ng-model="name">
<div>{{ name }}</div>

// ng-model后的name看成變量，這樣后面只是調(diào)用變量；

2、ng-minlength 和 ng-maxlength指令

限制最小長(zhǎng)度、最大長(zhǎng)度；type="text"什么都可以輸入；type="number"只能輸入數(shù)字；

<input class="form-control"
ng-model="name"
type="text"
ng-minlength="4"
ng-maxlength="10">
<div>{{ name }}</div>

3、ng-submit 和 ng-class 這個(gè)沒(méi)序號(hào)；

ng-submit 提交表單 ng-class 標(biāo)簽動(dòng)態(tài)添加class屬性；

// index.html
// ng-class, 參數(shù)無(wú)效，已經(jīng)touch過(guò)了，會(huì)添加error的class；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="lib/bootstrap.min.css">

    <style>

        .error
        {
            border: 1px solid #a10;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="Maincontroller">

    <form name="signUpForm" ng-submit="submitForm()">
        <div class="form-group">
            <label>用戶名:</label>

            <input name="username"
                   ng-model="username"
                   ng-class="{ 'error': signUpForm.username.$invalid &&
                                        signUpForm.username.$touched}"
                   ng-minlength="4"
                   required
                   class="form-control">
        </div>

        <div> {{ username }}</div>

    </form>


    <script src="lib/angular.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>


// main.js
angular.module('myApp', [])

       .controller('MainController', function($scope)
       {
           $scope.submitForm = function(){

               console.log('表單提交了!')

           }

       })

4、ng-if 用于條件判斷；

<body ng-app="myApp" ng-controller="MainController">

    <form name="signUpForm" ng-submit="submitForm()">
        <div class="form-group">
            <label>用戶名:</label>

            <input name="username"
                   ng-model="username"
                   ng-class="{ 'error': signUpForm.username.$invalid &&
                                        signUpForm.username.$touched }"
                   ng-minlength="4"
                   required
                   class="form-control">
        </div>

        <div ng-if="signUpForm.username.$invalid &&
        signUpForm.username.$touched"> 您的輸入有誤請(qǐng)檢查 </div>

        <div ng-if="signUpForm.username.$valid">
            <div>
                慕課網(wǎng)(IMOOC)是學(xué)習(xí)編程最簡(jiǎn)單的免費(fèi)平臺(tái)。慕課網(wǎng)提供了豐富的移動(dòng)端開(kāi)發(fā)、
                php開(kāi)發(fā)、web前端、html5教程以及css3視頻教程等課程資源。
            </div>
        </div>
    </form>


    <script src="lib/angular.min.js"></script>
    <script src="js/main.js"></script>
</body>

5、ng-disabeled

<body ng-app="myApp" ng-controller="MainController">

    <form name="signUpForm" ng-submit="submitForm()">
        <div class="form-group">
            <label>用戶名:</label>

            <input name="username"
                   ng-model="username"
                   ng-class="{ 'error': signUpForm.username.$invalid &&
                                        signUpForm.username.$touched }"
                   ng-minlength="4"
                   required
                   class="form-control">

            <input name="username2"
                   class="form-control"
                   ng-disabled="signUpForm.username.$invalid"
                   ng-model="username2">

            <button type="submit" class="btn btn-primary" ng-disabled="signUpForm.username.$invalid">提交</button>
        </div>
    </form>


    <script src="lib/angular.min.js"></script>
    <script src="js/main.js"></script>
</body>

6、表單建立

<!-- form 放到容器中 -->

// margin 上下30，左右auto
.wrapper
        {
            width:200px;
            margin: 30px auto;
        }

// 默認(rèn)是隱藏的
p.error
        {
            display: none;
        }

表單index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="lib/bootstrap.min.css">

    <style>

        .error
        {

            color: #a10
        }
        p.error
        {
            display: none;
        }

        input.error
        {
            border: 1px solid #a10;
        }

        .wrapper
        {
            width:200px;
            margin: 30px auto;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="MainController">

<!-- form 放到容器中 -->
    <div class="wrapper">
        <form >

            <h2>注冊(cè)</h2>

            <div class="form-group">
                <label>用戶名:</label>

                <input name="username" type="text" class="form-control">

                <p class="error">輸入錯(cuò)誤</p>

            </div>

            <div class="form-group">
                <label>密碼:</label>

                <input name="password" type="password" class="form-control">

            </div>

            <div class="form-group">
                <label>確認(rèn)密碼:</label>

                <input name="password2" type="password" class="form-control">

            </div>

            <div>
                <button class="btn btn-primary"> 注冊(cè) </button>
            </div>

        </form>


    </div>

    <script src="lib/angular.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

指令與表單合作驗(yàn)證

  • 1、創(chuàng)建和部署controller
.controller('SignUpController', function($scope){} 創(chuàng)建controller
第一項(xiàng)controller 名稱、第二項(xiàng)回調(diào)函數(shù)；回調(diào)函數(shù)里傳個(gè)$scope進(jìn)去，這個(gè)$scope作為dom環(huán)境里的域；

在$scope這個(gè)域里有個(gè)userdata，所有的表單數(shù)據(jù)最好存到這個(gè)userdata里； $scope.submitForm處理表單提交；

ng-app 和 ng-controller 寫(xiě)在一起，它們是平級(jí)的；

// main.js
angular.module('myApp', [])

    .controller('SignUpController', function($scope)
    {
        // 空對(duì)象
        $scope.userdata = {};

        $scope.submitForm = function()
        {
            // 打印表單輸入的內(nèi)容
            console.log($scope.userdata);

            if($scope.signUpForm.$invalid)
                alert('請(qǐng)檢查您的信息');
            else
                alert('提交成功!');
        }

    })

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="lib/bootstrap.min.css">

    <style>

        .error
        {

            color: #a10
        }
        p.error
        {
            display: none;
        }

        input.error
        {
            border: 1px solid #a10;
        }

        .wrapper
        {
            width:200px;
            margin: 30px auto;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="SignUpController">

<!-- form 放到容器中 -->
    <div class="wrapper">
        <form name="signUpForm" ng-submit="submitForm()">

            <h2>注冊(cè)</h2>

            <div class="form-group">
                <label>用戶名:</label>

                <input name="username"
                       type="text"
                       class="form-control"
                       ng-model="userdata.username">

                <p class="error">輸入錯(cuò)誤</p>

            </div>

            <div class="form-group">
                <label>密碼:</label>

                <input name="password"
                       type="password"
                       class="form-control"
                       ng-model="userdata.password">

            </div>

            <div class="form-group">
                <label>確認(rèn)密碼:</label>

                <input name="password2"
                       type="password"
                       class="form-control"
                       ng-model="userdata.password2">

            </div>

            <div>
                <button class="btn btn-primary"> 注冊(cè) </button>
            </div>

        </form>


    </div>

    <script src="lib/angular.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
  • 2、傳入用戶數(shù)據(jù)和創(chuàng)建驗(yàn)證規(guī)則
angular.module('myApp', [])

    .controller('SignUpController', function($scope)
    {
        // 空對(duì)象
        $scope.userdata = {};

        $scope.submitForm = function()
        {
            // 打印表單輸入的內(nèi)容
            console.log($scope.userdata);

            if($scope.signUpForm.$invalid)
                alert('請(qǐng)檢查您的信息');
            else
                alert('提交成功!');
        }

    })

    // 自己創(chuàng)建一條指令
    .directive('compare', function()
    {
        var o = {};     // 對(duì)象,返回這個(gè)對(duì)象

        // angular 命令是作用在元素和屬性上的;
        o.strict = 'AE'
        o.scope = {
            orgText: '=compare'
        }
        o.require = 'ngModel';

        // 主函數(shù) scope,元素,屬性,controller
        o.link = function(scope, ele, att, con)
        {
            // controller的$validators加一個(gè)方法compare,
            // 回調(diào)函數(shù)的值v,就是用戶輸入的值;
            con.$validators.compare = function(v)
            {
                // 返回,之前輸入的和現(xiàn)在輸入的是否一樣
                return v == scope.orgText
            }

            scope.$watch()

            // watch orgText,一旦orgText有變化就讓controller開(kāi)始驗(yàn)證
            scope.$watch('orgText', function()
            {
                con.$validate();

            })

        }

        return o;

    })


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="lib/bootstrap.min.css">

    <style>

        .error
        {

            color: #a10
        }
        /*p.error*/
        /*{*/
            /*display: none;*/
        /*}*/

        input.error
        {
            border: 1px solid #a10;
        }

        .wrapper
        {
            width:200px;
            margin: 30px auto;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="SignUpController">

<!-- form 放到容器中 -->
    <div class="wrapper">
        <form name="signUpForm" ng-submit="submitForm()">

            <h2>注冊(cè)</h2>

            <div class="form-group">
                <label>用戶名:</label>

                <!-- 打印出來(lái)檢查錯(cuò)誤! -->
                <pre>合法, {{ signUpForm.username.$valid}}</pre>
                <pre> {{ signUpForm.username }} </pre>
                <pre> {{ userdata.username }} </pre>

                <input name="username"
                       type="text"
                       class="form-control"
                       ng-model="userdata.username"
                       ng-minlength="4"
                       ng-maxlength="32"
                       required>

                <p class="error" ng-if="signUpForm.username.$error.required && signUpForm.username.$touched">用戶名不可為空</p>

                <p class="error" ng-if="(signUpForm.username.$error.minlength ||
                 signUpForm.username.$error.maxlength) && signUpForm.username.$touched">用戶名稱長(zhǎng)度應(yīng)在4到32位之間</p>

            </div>

            <div class="form-group">
                <label>密碼:</label>

                <input name="password"
                       type="password"
                       class="form-control"
                       ng-model="userdata.password"
                       ng-minlength="6"
                       ng-maxlength="255"
                       required>

                <p class="error" ng-if="signUpForm.password.$error.required && signUpForm.password.$touched">密碼不可為空</p>

                <p class="error" ng-if="(signUpForm.password.$error.minlength ||
                 signUpForm.password.$error.maxlength) && signUpForm.password.$touched">密碼長(zhǎng)度應(yīng)在6到255位之間</p>

            </div>

            <div class="form-group">
                <label>確認(rèn)密碼:</label>

                <pre>合法, {{ signUpForm.password2.$valid}}</pre>
                <pre> {{ signUpForm.password2 }} </pre>
                <pre> {{ userdata.password2 }} </pre>

                <input name="password2"
                       type="password"
                       class="form-control"
                       ng-model="userdata.password2"
                       compare="userdata.password"
                       required>

                <p class="error" ng-if="signUpForm.password2.$error.compare && signUpForm.password2.$touched">兩次輸入不一致</p>
            </div>

            <div>
                <button class="btn btn-primary"> 注冊(cè) </button>
            </div>

        </form>

    </div>

    <script src="lib/angular.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
  • 3、顯示錯(cuò)誤信息和通過(guò)信息

font-awesome 加個(gè)綠色的對(duì)號(hào)；

.input-result {
position: relative;
top: -26px;
left: 180px;
}

chrome中定位到元素，添加樣式top、left；鍵盤(pán)方向鍵上下可以加減的；

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • AngularJS作為下一代的Web應(yīng)用開(kāi)發(fā)的框架，表單驗(yàn)證的方式與JQuery/JS截然不同，總之，更加簡(jiǎn)潔更加...
    jdzhangxin閱讀 1,439評(píng)論 0贊 0
  • AngularJS是什么？AngularJs（后面就簡(jiǎn)稱ng了）是一個(gè)用于設(shè)計(jì)動(dòng)態(tài)web應(yīng)用的結(jié)構(gòu)框架。首先，它是...
    200813閱讀 1,788評(píng)論 0贊 3
  • AngularJSAngularJS 是一個(gè) MV* 框架， 最適于開(kāi)發(fā)客戶端的單頁(yè)面應(yīng)用。它不是個(gè)功能庫(kù)，...
    一直以來(lái)都很好閱讀 955評(píng)論 0贊 0
  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)。ng-model 指令也可以：...
    壬萬(wàn)er閱讀 974評(píng)論 0贊 2
  • 1 安裝Jenkins Jenkins是基于Java開(kāi)發(fā)的一種持續(xù)集成工具。所以呢，要使用Jenkins必須使用先...
    Jackson_Z閱讀 2,677評(píng)論 0贊 3

友情鏈接更多精彩內(nèi)容