angular验证表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angular表单验证</title>
        <style>
        .box{width: 500px;height:auto;border:solid 1px #ccc;box-shadow: 2px 2px 8px #999;margin:100px auto;}
        .box>div{box-shadow: -2px -2px 8px #999;padding: 25px;}
            p{color: #f00;}
            *{margin:0;padding:0 ;}
            .name{margin-top: 15px;}
            .name label{width: 70px;display: inline-block;}
        </style>
    </head>
    <body>
        <div class="box">
            <div>
                <h1>angular表单验证</h1>
                <form ng-app="myApp" ng-controller="myCtrl" name="myForm" novalidate>
                    <div class="name">
                        <label>用户名:</label>
                        <input  type="text" name="name" ng-model="name" required/>
                        <p ng-show="myForm.name.$dirty && myForm.name.$invalid">
                            <span ng-show="myForm.name.$error.required">用户名是必填字段</span>
                        </p>
                    </div>
                    <div class="name">
                        <label>邮箱:</label>
                        <input  type="email" name="email" ng-model="email" required/>
                        <p ng-show="myForm.email.$dirty && myForm.email.$invalid">
                            <span ng-show="myForm.email.$error.required">邮箱是必填字段</span>
                            <span ng-show="myForm.email.$error.email">邮箱是不合法的</span>
                        </p>
                        <p>
                            <input type="submit" ng-disabled="myForm.name.$dirty && myForm.name.$invalid ||
                                 myForm.email.$dirty && myForm.email.$invalid">
                        </p>
                    </div>
                </form>
            </div>  
        </div>
        <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script>
            var app=angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                $scope.name="前端ABC";
                $scope.email="15610508@qq.com";
            })
        </script>
    </body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » angular验证表单

赞 (0)
分享到:更多 ()

发表评论 0