AngularJS表单校验

最新推荐文章于 2024-04-16 01:36:16 发布

xyphf_和派孔明

最新推荐文章于 2024-04-16 01:36:16 发布

阅读量535

点赞数

分类专栏： angular.js入门文章标签： angularjs 表单

angular.js入门专栏收录该内容

34 篇文章 1 订阅

订阅专栏

$pristine表示表单或者控件内容是否未输入过
$dirty 表示表单或控件内容是否已输入过
$valid 表示表单或控件内容是否已验证通过
$invalid 表示表单或控件内容是否未验证通过
$error 表示表单或控件内容验证时的错误提示信息
前4项属性均返回布尔类型的值，最后一项属性返回一个错误对象，包含全部表单控件验证时的返回的错误信息。

例一：
没输入不可点击，输入了才可以点击

<html ng-app='TestFormModule'>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="framework/angular-1.3.0.14/angular.js"></script>
        <script src="FormBasic.js"></script>
    </head>
    <body>
        <form name="myForm" ng-submit="save()" ng-controller="TestFormModule">
              <input name="userName" type="text" ng-model="user.userName" required/>
              //required自动校验
              <input name="password" type="password" ng-model="user.password" required/>
              <input type="submit" ng-disabled="myForm.$invalid"/>
              //将按钮绑定到myForm.$invalid上，这样按钮就可以按照表单校验状态自动变得可点击不可点击
        </form>
    </body>
</html>

var appModule = angular.module('TestFormModule', []);
appModule.controller("TestFormModule",function($scope){
    $scope.user={
        userName:'damoqiongqiu',
        password:''
    };
    $scope.save=function(){
        alert("保存数据!");
    }
});

例二：

<!doctype html>
<html ng-app>
    <head>
        <script src="framework/angular-1.3.0.14/angular.js"></script>
        <script src="FormAdv1.js"></script>
    </head>
    <body>
        <div ng-controller="Controller">
            <form name="form" class="css-form" novalidate>
                Name:
                <input type="text" ng-model="user.name" name="uName" required /><br/>
                E-mail:
                <input type="email" ng-model="user.email" name="uEmail" required /><br/>
                <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">
                    Invalid:
                    <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
                    <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
                </div>
                Gender:<br/>
                <input type="radio" ng-model="user.gender" value="male" />
                male
                <input type="radio" ng-model="user.gender" value="female" />
                female<br/>
                <input type="checkbox" ng-model="user.agree" name="userAgree" required />
                I agree:
                <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required />
                <div ng-show="!user.agree || !user.agreeSign">
                    Please agree and sign.
                </div>
                <br/>
                <button ng-click="reset()" ng-disabled="isUnchanged(user)">
                    RESET
                </button>
                <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">
                    SAVE
                </button>
            </form>
        </div>
    </body>
</html>

function Controller($scope) {
    $scope.master = {};

    $scope.update = function(user) {
        $scope.master = angular.copy(user);
    };

    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };

    $scope.isUnchanged = function(user) {
        return angular.equals(user, $scope.master);
    };

    $scope.reset();
}

例三：自定义输入项

<!doctype html>
<html ng-app="form-example2">
    <head>
        <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <script src="framework/angular-1.3.0.14/angular.js"></script>
        <script src="FormCustom.js"></script>
        <style type="text/css">
            div[contentEditable] {
                cursor: pointer;
                background-color: #D0D0D0;
            }
        </style>
    </head>
    <body>
        <div>
            <div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
            <pre>model = {{content}}</pre>
        </div>
    </body>
</html>

angular.module('form-example2', []).directive('contenteditable', function() {
    return {
        require : 'ngModel',
        link : function(scope, elm, attrs, ctrl) {
            // view -> model
            elm.bind('keyup', function() {
                scope.$apply(function() {
                    ctrl.$setViewValue(elm.text());
                });
            });

            // model -> view
            ctrl.$render = function() {
                elm.html(ctrl.$viewValue);
            };

            // load init value from DOM
            ctrl.$setViewValue(elm.html());
        }
    };
});

内容来源:慕课网

xyphf_和派孔明

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS表单校验

例一：没输入不可点击，输入了才可以点击<html ng-app='TestFormModule'> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="framework/angular-1.3.0.14/angular.js">
复制链接

扫一扫

专栏目录