AngularJS表单验证

2017-03-01 本文已影响46人 kakukeme

AngularJS表单验证---慕课网视频http://www.imooc.com/learn/505

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

Angularjs 指令；

1、理解$scope在Angular中的意义；
2、掌握angular基础指令；
3、熟练配合各组件对表单进行动态验证；

ng-model

angularjs.org

angularjs、bootstrap、jquery

angular.module('myApp', [])
[]空数组，不需要注入什么其他依赖；

Angularjs 基础指令

1、ng-model

ng-model 双向绑定
<input ng-model="name">
<div>{{ name }}</div>

// ng-model后的name看成变量，这样后面只是调用变量；

2、ng-minlength 和 ng-maxlength指令

限制最小长度、最大长度；type="text"什么都可以输入；type="number"只能输入数字；

3、ng-submit 和 ng-class 这个没序号；

ng-submit 提交表单 ng-class 标签动态添加class属性；

// index.html
// ng-class, 参数无效，已经touch过了，会添加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"> 您的输入有误请检查 </div>

        <div ng-if="signUpForm.username.$valid">
            <div>
                慕课网(IMOOC)是学习编程最简单的免费平台。慕课网提供了丰富的移动端开发、
                php开发、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;
        }

// 默认是隐藏的
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>注册</h2>

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

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

                <p class="error">输入错误</p>

            </div>

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

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

            </div>

            <div class="form-group">
                <label>确认密码:</label>

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

            </div>

            <div>
                <button class="btn btn-primary"> 注册 </button>
            </div>

        </form>


    </div>

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

指令与表单合作验证

1、创建和部署controller

.controller('SignUpController', function($scope){} 创建controller
第一项controller 名称、第二项回调函数；回调函数里传个$scope进去，这个$scope作为dom环境里的域；

在$scope这个域里有个userdata，所有的表单数据最好存到这个userdata里； $scope.submitForm处理表单提交；

ng-app 和 ng-controller 写在一起，它们是平级的；

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

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

        $scope.submitForm = function()
        {
            // 打印表单输入的内容
            console.log($scope.userdata);

            if($scope.signUpForm.$invalid)
                alert('请检查您的信息');
            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>注册</h2>

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

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

                <p class="error">输入错误</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>确认密码:</label>

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

            </div>

            <div>
                <button class="btn btn-primary"> 注册 </button>
            </div>

        </form>


    </div>

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

2、传入用户数据和创建验证规则

angular.module('myApp', [])

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

        $scope.submitForm = function()
        {
            // 打印表单输入的内容
            console.log($scope.userdata);

            if($scope.signUpForm.$invalid)
                alert('请检查您的信息');
            else
                alert('提交成功!');
        }

    })

    // 自己创建一条指令
    .directive('compare', function()
    {
        var o = {};     // 对象,返回这个对象

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

        // 主函数 scope,元素,属性,controller
        o.link = function(scope, ele, att, con)
        {
            // controller的$validators加一个方法compare,
            // 回调函数的值v,就是用户输入的值;
            con.$validators.compare = function(v)
            {
                // 返回,之前输入的和现在输入的是否一样
                return v == scope.orgText
            }

            scope.$watch()

            // watch orgText,一旦orgText有变化就让controller开始验证
            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>注册</h2>

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

                <!-- 打印出来检查错误! -->
                <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">用户名称长度应在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">密码长度应在6到255位之间</p>

            </div>

            <div class="form-group">
                <label>确认密码:</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"> 注册 </button>
            </div>

        </form>

    </div>

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

3、显示错误信息和通过信息

font-awesome 加个绿色的对号；

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

chrome中定位到元素，添加样式top、left；键盘方向键上下可以加减的；