美文网首页前端学习
AngularJS表单验证

AngularJS表单验证

作者: kakukeme | 来源:发表于2017-03-01 15:43 被阅读46次

    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"只能输入数字；

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

    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；键盘方向键上下可以加减的；

    相关文章

      网友评论

        本文标题：AngularJS表单验证

        本文链接：https://www.haomeiwen.com/subject/qntcgttx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        前端学习

        关于我们|服务条款|联系我们|AngularJS表单验证|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！