AngularJS表单验证

来源：互联网发布：java输出俄文字母表编辑：程序博客网时间：2024/06/05 09:55

input属性

ng-model 绑定的数据
ng-required 是否必填
ng-minlength 最小长度
ng-maxlength 最大长度
ng-pattern 匹配模式
ng-change 值变化的回调

form控制变量

FormName.FieldName.$pristine 字段是否未更改
FormName.FieldName.$dirty 字段是否更改
FormName.FieldName.$valid 字段有效
FormName.FieldName.$invalid 字段无效
FormName.FieldName.$error 字段错误信息

下面根据几个实例来详细解析表单验证

select的实例

index01.html<!DOCTYPE html><html ng-app="myApp">    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="../js/angular-1.3.14.min.js" ></script>    </head>    <body>        <div ng-controller="myController">        <!--             select的name属性是供后台程序员辨认的属性，将value的值传给后台             ng-options：定义一个下拉列表，             item for item in data：将data中的对象赋值option中        -->            <select name="address" ng-model="addr" ng-options="item for item in data">                <option value="">--请选择--</option>            </select>            {{addr}}        </div>        <script>            angular.module("myApp",[])            .controller("myController",function($scope){                $scope.data = ["成都","深圳","上海","北京"];            });        </script>    </body></html>

index02.html<!DOCTYPE html><html ng-app="myApp">    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="../js/angular-1.3.14.min.js" ></script>    </head>    <body>        <div ng-controller="myController">            <select name="message" ng-model="msg" ng-options="item.id as item.name for item in data">                <option value="">--请输入选择--</option>                <option value=""></option>            </select>            {{msg}}        </div>        <script>            angular.module("myApp",[])            .controller("myController",["$scope",function($scope){                $scope.data=[{                    "id":201311220313,                    "name":"李嘉"                },{                    "id":201311220314,                    "name":"李亚南"                },{                    "id":201311220315,                    "name":"李月梅"                },{                    "id":201311220316,                    "name":"刘楠"                }];            }]);        </script>    </body></html>

index03.html<!DOCTYPE html><html ng-app="myApp">    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="../js/angular-1.3.14.min.js" ></script>    </head>    <body>        <div ng-controller="myController"><!--item.id as item.name group by item.grade for item in data:将数据库中的data按照grade分组形式在options显示出来。-->            <select name="message" ng-model="msg" ng-options="item.id as item.name group by item.grade for item in data">                <option value="">--请输入选择--</option>                <option value=""></option>            </select>            {{msg}}        </div>        <script>            angular.module("myApp",[])            .controller("myController",["$scope",function($scope){                $scope.data=[{                    "id":2013110313,                    "name":"李嘉",                    "grade":'6班'                },{                    "id":2013110314,                    "name":"李亚南",                    "grade":'3班'                },{                    "id":2013110315,                    "name":"李月梅",                    "grade":'3班'                },{                    "id":2013110316,                    "name":"刘楠",                    "grade":'6班'                }];            }]);        </script>    </body></html>

表单验证实例

<!DOCTYPE html><html ng-app="myApp">    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" href="../css/bootstrap.css" />        <script type="text/javascript" src="../js/angular-1.3.14.min.js" ></script>    </head>    <body>        <div class="container" ng-controller="myController">            <form class="form-horizontal" name="myForm" novalidate>                <div class="form-group">                    <label for="username" class="col-sm-2 control-label">用户名：</label>                    <div class="col-sm-10">                        <input type="text" name="username" ng-model="username" class="form-control" id="username" placeholder="请输入用户名" ng-pattern="/^[0-9a-zA-Z]{6,12}$/">                        <p class="bg-danger" ng-show="myForm.username.$error.pattern">用户名为6-12位的字母和数字</p>                    </div>                </div>                <div class="form-group">                    <label for="password" class="col-sm-2 control-label">密码：</label>                    <div class="col-sm-10">                        <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码">                    </div>                </div>                <div class="form-group">                    <label for="refPassword" class="col-sm-2 control-label">确认密码：</label>                    <div class="col-sm-10">                        <input type="password" class="form-control" id="refPassword" placeholder="请再次输入密码">                    </div>                </div>                <div class="form-group">                    <label for="email" class="col-sm-2 control-label">邮箱：</label>                    <div class="col-sm-10">                        <input type="text" name="email" ng-model="email" class="form-control" placeholder="请输入邮箱" required>                        <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>                    </div>                </div>                <div class="form-group">                    <label class="col-sm-2 control-label">您的性别是：</label>                    <div class="col-sm-10">                        <div class="radio">                            <label class="radio-inline">                                <input type="radio" name="sex" value="保密" ng-model="sex">保密                            </label>                            <label class="radio-inline">                                <input type="radio" name="sex" value="男" ng-model="sex">男                            </label>                            <label class="radio-inline">                                <input type="radio" name="sex" value="女" ng-model="sex"> 女                            </label>                       </div>                    </div>                </div>                <div class="form-group">                    <label class="col-sm-2 control-label">您喜欢的运动是：</label>                    <div class="col-sm-10">                        <div class="checkbox">                            <label class="checkbox-inline">                              <input type="checkbox" name="check" ng-model="sing" ng-true-value="'唱歌'" ng-false-value="''">唱歌                            </label>                            <label class="checkbox-inline">                              <input type="checkbox" name="check" ng-model="dance" ng-true-value="'跳舞'" ng-false-value="''">跳舞                            </label>                        </div>                    </div>                </div>                <div class="form-group">                    <div class="col-sm-offset-2 col-sm-10">                        <div class="checkbox">                            <label>                              <input type="checkbox" ng-model="agree">同意公司要求规定                            </label>                        </div>                    </div>                </div>                <div class="form-group">                    <div class="col-sm-offset-2 col-sm-10">                        <button type="button" ng-click="show()" ng-disabled="!agree || myForm.username.$error.pattern || myForm.email.$dirty && myForm.email.$invalid"  class="btn btn-primary">登录</button>                        <button type="reset" class="btn btn-default">重置</button>                    </div>                </div>            </form>        </div>        <script>            angular.module("myApp",[])            .controller("myController",function($scope){});        </script>    </body></html>

0 0