Angularjs 表单输入验证

1.angularjs表单控件提供验证功能,对输入的非法数据进行警告。

注意:客服端的验证不能保证数据的安全性,所以服务端也要进行数据验证

   <div ng-app="Myapp" ng-controller="MyControll">
        <form name="Myform" novalidate>
            <p>
                用户名:<input type="text" name="user" ng-model="user" required /><br />
                <span ng-show="Myform.user.$dirty&&Myform.user.$invalid">
                    <span style="color:red;" ng-show="Myform.user.$error.required">用户不能为空</span>
                </span>
            </p>
            <p>
                邮箱:<input type="email" name="Email" ng-model="Email" required /><br />
                <span style="color:red;" ng-show="Myform.Email.$dirty&&Myform.Email.$invalid">
                    <span ng-show="Myform.Email.$error.required">邮箱不能为空</span>
                    <span ng-show="Myform.Email.$error.email">邮箱非法</span>
                </span>
            </p>
            <p><input type="submit" value="提交" 
                ng-disabled="Myform.user.$dirty&&Myform.user.$invalid || Myform.Email.$dirty&&Myform.Email.$invalid" /></p>
        </form>
    </div>
    <script>
        var app = angular.module("Myapp", []).controller("MyControll", function ($scope) {
            $scope.user = "li cong";
            $scope.Email = "aa@qq.com";
        });
    </script>

 

几个验证属性:

这个章节就是讲了怎样在form表单里面加验证,熟练使用$invalid,$dirty属性,了解它的验证机制

 

posted @ 2017-01-06 00:32  微笑代表淡定.Net  阅读(131)  评论(0)    收藏  举报