AngularJS表单验证

最新推荐文章于 2019-07-07 21:19:49 发布
最新推荐文章于 2019-07-07 21:19:49 发布
阅读量350 收藏 1
点赞数
分类专栏： angularjs 文章标签： angularjs 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yana_li/article/details/52910838
版权

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
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS 学习笔记（表单校验篇）
cackling的专栏
09-20 2614
作为一个伪前端javaer，Bootstrap让我不用再为表示层
angularJS form表单验证
xuanwuziyou的专栏
11-04 2407
本文示例用angularJS对form表单做输入验证，当所有值都输入正确时，则注册按钮可用。 页面： html: Title 用户名 =
(译) 在AngularJS中使用的表单验证功能
weixin_34293141的博客
11-15 115
验证功能是AngularJS里面最酷炫的功能之一，它可以让你写出一个具有良好用户体验的Web应用。 在AngularJS中，有许多用于验证的指令。我们将先学习几个最流行的内置指令，然后再创建一个自定义验证规则的指令。 <form name="form"> <label name="email">Your email</label> <i...
Angularjs Form表单验证机制
weixin_43996999的博客
07-07 548
个人总结 one: 一般来讲表单可能遇到的问题 1.如何数据绑定 2.验证表单 3.显示出错信息 4.整个form的验证 5.避免提交没有验证通过的表单 6.防止多次提交 two: input表单验证需要的属性 name 名字(这里需要注意:不光是input元素需要,最外层的form标签也需要一个name属性) ng-model ...
angularjs 简单的form表单验证
进步ing
11-13 2791
下面举一个简单的例子：提交表单时验证，input为必填项  &lt;!DOCTYPE html&gt; &lt;html lang="en" ng-app="app"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;服务&lt;/title&gt; &lt;scrip
AngularJs表单验证实例详解
10-22
本文将深入探讨AngularJS表单验证的实例和常见验证指令。 1. **必填项验证**：通过在HTML5的输入字段上添加`required`属性，可以检查用户是否填写了该字段。例如： ```html ``` 如果用户未填写此字段，表单将...
AngularJS表单验证功能
10-19
主要为大家详细介绍了AngularJS表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJS表单验证功能分析
10-19
主要介绍了AngularJS表单验证功能,结合具体实例形式分析了AngularJS表单验证的操作步骤、实现技巧与相关注意事项,需要的朋友可以参考下
angularjs表单验证Demo
01-07
AngularJS是前端开发流行框架，本Demo展示了表单验证的意义，及实现方法，掌握Angular基础指令，通过不同的指令元素可以拥有不同功能，并通过指令与表单合作验证，从而实现表单验证的敏捷化开发。
AngularJS 表单（ng-form）验证
分享技术，共建开放平台
08-12 3万+
在HTML中，用户通过input, select, textarea等元素进行输入，我们通常用表单来包装和管理这些控件。客户端表单验证非常重要，可以及时地为用户提供表单验证信息。但客户端表单验证只是为了增强用户体验，服务器端验证仍然是必要的。 AngularJS最大的特点便是数据绑定。利用Angular在客户端脚本中构建MVC框架，Model和View之间可以实现双向绑定。因此Angular
angularjs--form表单验证 form表单验证概述
mutourenoo的专栏
12-14 117
转载: [url]https://www.oschina.net/translate/angularjs-form-validation?cmp[/url] 在表单中控制变量 formName.inputField.$pristine 字段是否 未更改 formName.inputField.$dirty 字段是否 更改 formName.inputField.$valid...
angularjs 研究1 : 表单的验证
renpinghao的专栏
07-25 997
最近在项目中用到angularjs的表单验证，通过网上的一些文章和自己的感觉，可以大致中css样式（和ng-命令对应的class）和 js（格式为： 表单名.字段名.验证的点。如 loginForm.email.$invalid ) 两个方向上进行研究1.css样式：每个ng-命令都会在html代码中对应一个或多个className。如下图所示<form name="loginForm" ng-su
AngularJS form validation-表单验证
热门推荐
Donnie的专栏
01-05 3万+
angularjs form validation 表单验证 翻译
AngularJS form表单验证（非常全面)
weixin_30273175的博客
02-02 364
构建一个ng表单 novalidate=”novalidate” 2.form中不能有action属性。提交交由ng-submit处理 3.每个input一定要有ng-model，最好有一个name方便引用。然后用require或者ng-minlength之类才起作用 <form name="form" novalidate="novalidate"> &...
AngularJS - 表单验证
seaalan的博客
01-09 225
&lt;form role="form" name="addStaffForm"&gt; &lt;div ng-init="vm.current.form = addStaffForm" class="form-group" ng-class="{ 'has-error' : addStaffForm.email.$invalid &amp;&amp;
angularJs表单验证邮箱和用户名
丿灬安之若死
09-10 1428
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6
AngularJS 的表单验证
weixin_30908649的博客
05-25 99
最近开始学习angularjs，学到表单验证的时候发现有必要学习下大神的好文章： 转：http://www.oschina.net/translate/angularjs-form-validation 今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西（就像我们另外的一篇文章:提交Ajax表单：AngularJS的方式). 不过不用担...
AngularJs 表单提交按钮状态
最新发布
05-31
在 AngularJS 中，可以通过设置表单提交按钮的状态来防止用户多次提交表单。可以使用 `ng-disabled` 指令来控制提交按钮的状态，该指令可以绑定到表单的状态上。例如，可以在表单被提交时将按钮禁用，然后在表单处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值