angularJS02

最新推荐文章于 2019-11-07 18:48:51 发布
最新推荐文章于 2019-11-07 18:48:51 发布
阅读量198 收藏
点赞数
分类专栏： angularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35546160/article/details/60145225
版权
<!DOCTYPE html>


<html>
    <head>
        <meta name="viewport"  charset="utf-8" content="width=device-width" />
        <title>Index</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="//cdn.bootcss.com/angular.js/2.0.0-beta.17/angular2-all-testing.umd.dev.js"></script>
        
        <style type="text/css">
            body { padding-top: 30px; }
        </style>
    </head>
    <body  ng-Controller="MyController">
        <div class="col-md-6">
            <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>
                <div class="form-group  has-feedback">
                    <div class="col-md-4">
                        <label for="name">1.必填项</label>
                    </div>
                    <div class="col-md-8">
                        <input class="form-control" id="name" name="name" type="text" required ng-model='user.name' />
                        <span class="glyphicon glyphicon-ok form-control-feedback"
                              ng-show="myForm.name.$dirty && myForm.name.$valid"></span>
                    </div>
                </div>
                <div class="form-group  has-feedback">
                    <div class="col-md-4">
                        <label for="minlength">2.最小长度=5</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" id="minlength" name="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
                        <span class="glyphicon glyphicon-ok form-control-feedback"
                              ng-show="myForm.minlength.$dirty && myForm.minlength.$valid"></span>
                    </div>
                </div>
                <div class="form-group  has-feedback">
                    <div class="col-md-4">
                        <label for="maxlength">3.最大长度=20</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" id="maxlength" name="maxlength" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />
                        <span class="glyphicon glyphicon-ok form-control-feedback"
                              ng-show="myForm.maxlength.$dirty && myForm.maxlength.$valid"></span>
                    </div>
                </div>
                <div class="form-group  has-feedback">
                    <div class="col-md-4">
                        <label for="pattern">4. 模式匹配</label>
                    </div>
                    <div class="col-md-8">
                        <input type="text" id="pattern" name="pattern" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" />
                        <span class="glyphicon glyphicon-ok form-control-feedback"
                              ng-show="myForm.pattern.$dirty && myForm.pattern.$valid"></span>
                    </div>
                </div>
                <div class="form-group  has-feedback">
                    <div class="col-md-4">
                        <label for="email">5. 电子邮件</label>
                    </div>
                    <div class="col-md-8">
                        <input type="email" id="email" name="email" ng-model="user.email" class="form-control" />
                        <span class="glyphicon glyphicon-ok form-control-feedback"
                              ng-show="myForm.email.$dirty && myForm.email.$valid"></span>
                    </div>
                </div>
                <div class="form-group  has-feedback">
                    <div class="col-md-4">
                        <label for="age">6. 数字</label>
                    </div>
                    <div class="col-md-8">
                        <input type="number" id="age" name="age" ng-model="user.age" class="form-control" />


                        <span class="glyphicon glyphicon-ok form-control-feedback"
                              ng-show="myForm.age.$dirty && myForm.age.$valid"></span>
                    </div>
                </div>
                <div class="form-group  has-feedback">
                    <div class="col-md-4">
                        <label for="url"> 7. URL</label>
                    </div>
                    <div class="col-md-8">
                        <input type="url" id="url" name="url" ng-model="user.url" class="form-control" />
                        <span class="glyphicon glyphicon-ok form-control-feedback"
                              ng-show="myForm.url.$dirty && myForm.url.$valid"></span>
                    </div>
                </div>
                <div class="form-group  text-center">
                    <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />
                </div>
            </form>       
        </div>
        <div class="col-md-12">
            1.必填项:{{user.name}}&nbsp;&nbsp;
            $pristine 【没修改】：{{myForm.name.$pristine }}&nbsp;&nbsp;
            $dirty【修改过】：{{myForm.name.$dirty}}&nbsp;&nbsp;
            $invalid【验证失败】：{{myForm.name.$invalid}}&nbsp;&nbsp;
            $invalid【验证成功】：{{myForm.name.$valid}}&nbsp;&nbsp;
            required：{{myForm.name.$error.required}}&nbsp;&nbsp;
            <br>
            2.最小长度=5:{{user.minlength}}
            $pristine 【没修改】：{{myForm.minlength.$pristine }}&nbsp;&nbsp;
            $dirty【修改过】：{{myForm.minlength.$dirty}}&nbsp;&nbsp;
            $invalid【验证失败】：{{myForm.minlength.$invalid}}&nbsp;&nbsp;
            $invalid【验证成功】：{{myForm.minlength.$valid}}&nbsp;&nbsp;
            $error【错误详情】：{{myForm.minlength.$error}}&nbsp;&nbsp;<br>
            3.最大长度=20:{{user.maxlength}}
            $pristine 【没修改】：{{myForm.maxlength.$pristine }}&nbsp;&nbsp;
            $dirty【修改过】：{{myForm.maxlength.$dirty}}&nbsp;&nbsp;
            $invalid【验证失败】：{{myForm.maxlength.$invalid}}&nbsp;&nbsp;
            $invalid【验证成功】：{{myForm.maxlength.$valid}}&nbsp;&nbsp;
            $error【错误详情】：{{myForm.maxlength.$error}}&nbsp;&nbsp;<br>
            4.模式匹配:{{user.pattern}}
            $pristine 【没修改】：{{myForm.pattern.$pristine }}&nbsp;&nbsp;
            $dirty【修改过】：{{myForm.pattern.$dirty}}&nbsp;&nbsp;
            $invalid【验证失败】：{{myForm.pattern.$invalid}}&nbsp;&nbsp;
            $invalid【验证成功】：{{myForm.pattern.$valid}}&nbsp;&nbsp;
            $error【错误详情】：{{myForm.pattern.$error}}&nbsp;&nbsp;<br>
            5.电子邮件:{{user.email}}
            $pristine 【没修改】：{{myForm.email.$pristine }}&nbsp;&nbsp;
            $dirty【修改过】：{{myForm.email.$dirty}}&nbsp;&nbsp;
            $invalid【验证失败】：{{myForm.email.$invalid}}&nbsp;&nbsp;
            $invalid【验证成功】：{{myForm.email.$valid}}&nbsp;&nbsp;
            $error【错误详情】：{{myForm.email.$error}}&nbsp;&nbsp;<br>
            6.数字:{{user.age}}
            $pristine 【没修改】：{{myForm.age.$pristine }}&nbsp;&nbsp;
            $dirty【修改过】：{{myForm.age.$dirty}}&nbsp;&nbsp;
            $invalid【验证失败】：{{myForm.age.$invalid}}&nbsp;&nbsp;
            $invalid【验证成功】：{{myForm.age.$valid}}&nbsp;&nbsp;
            $error【错误详情】：{{myForm.age.$error}}&nbsp;&nbsp;<br>
            7.URL:{{user.url}}
            $pristine 【没修改】：{{myForm.url.$pristine }}&nbsp;&nbsp;
            $dirty【修改过】：{{myForm.url.$dirty}}&nbsp;&nbsp;
            $invalid【验证失败】：{{myForm.url.$invalid}}&nbsp;&nbsp;
            $invalid【验证成功】：{{myForm.url.$valid}}&nbsp;&nbsp;
            $error【错误详情】：{{myForm.url.$error}}&nbsp;&nbsp;<br>
        </div>
    </body>
</html>
<script type="text/javascript">
    angular.module('myTest', [])
        .controller('myController', function($scope) {
            $scope.submitForm = function(isValid) {
                if (!isValid) {
                    alert('验证失败');
                }
            };
        }
        );
</script>
JavaWeb-FaceStrap
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS学习笔记
欧阳惜竹的博客
06-26 369
这里写自定义目录标题一、指令1. ng-app=" "2. ng-controller3. ng-init="变量=值;变量='值'"4. ng-model="变量"ng-model1）ng-empty 空2）ng-not-empty 不空3）ng-touched 和控件进行过交互4）ng-untouched 和控件没有进行过交互5）ng-valid 表单通过验证6）ng-invalid 表单未通...
AngularJS语法入门02
01-20
AngularJS语法入门02，有疑问的，或者对代码有什么建设性意见的，可以直接去微博（http://blog.csdn.net/microsoftdesigner/article/details/54631316）提出来哦
AngularJs 02
weixin_30929011的博客
07-27 54
====services与指令的使用==== html源码： <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Angular JS</title><link rel="stylesheet" href="http://apps.bdi...
AngularJS 02
zhanglong_longlong的专栏
12-14 352
鼠标移入移出 var ng = angular.module("Ng", []); ng.directive("supermanss", function () { return { restrict: "A", link: function () { alert("Hello")} }; }) ng.directive("enter
AngularJS 02（控制器01）
programmer_wirein的博客
05-23 229
*JavaScript脚本语言中不要用angularJS表达式，会出问题。 控制器是JavaScript脚本的function函数，他是帮助我们把model模型、控制器封装在方法里边，这样和页面分离开。在控制器里面我们也可以定义基本的数据类型、定义对象属性、定义方法。 在Angular中控制器在1.2.5版本以下才能在页面中直接使用，在1.2.5以上需要使用model模块去给他注册才能够使用
angularjs-02
I_am_root的专栏
06-26 575
1.教程问题 可以看这个的http://angularjs.cn/介绍
AngularJS Day02
天码星空
05-08 211
AngularJS的组成 模块Module 控制器Controller 表达式 模块Module JS代码应避免全局 AngularJS从1.3开始已经不允许全局控制器 利用模块Module封装控制器Controller，一个AngularJS应用中只能有一个模块 (ng-app="")，但一个模块中可以有多个控制器(ngcontroller="") 语法： 创建：angular.mod...
AngularJS—02遍历数据
weixin_36282409的博客
12-23 203
效果图 angular 遍历数据 名称国家 {{obj.name}}{{obj.country}}
AngularJS_02_Bootstrap
pre_eminent的JAVA学习园地
11-06 250
这一章讲述 Angular 初始化过程以及必要的时候用户如何能够手动将 Angular 初始化。 Angular &lt;script&gt; 标签 下面例子展示了推荐的在应用中使用 Angular 的自动初始化的代码路径设置。 &lt;!doctype html&gt; &lt;html ng-app&gt; &lt;body&gt; ... &lt;script s...
angularJS详解
u011927449的博客
11-07 968
这篇文章转载 kooky798 的博客，http://blog.csdn.net/yy374864125/article/details/41349417, 写到这么详细也是没谁了，必须粉一个 ...
AngularJS视频课程
07-22
教程名称：AngularJS视频课程课程目录：【】AngularJS - 01 - Binding【】AngularJS - 02 - Controllers【】AngularJS - 03 - The Dot【】AngularJS - 04 - Sharing Data Between Controllers【】AngularJS - 05 - ...
AngularJS入门教程02：AngularJS模板
07-24
【AngularJS入门教程02：AngularJS模板】 AngularJS初学者看到中文入门教程，却无法使用GitHub下载到配套的Angular的Seed工程，因此学习曲线大。 在此专门从GitHub下载配套工程打包分享给大家。 本集教程地址： ...
AngularJS实现表单验证功能
10-20
在AngularJS中，表单验证是一项关键功能，它允许开发者在用户输入数据时实时检查其有效性，从而确保数据的质量和一致性。本篇文章将详细介绍如何利用AngularJS实现表单验证。 首先，`ng-model`指令是AngularJS中用...
AngularJS中下拉框的高级用法示例
10-19
`x` 表示键，`y` 表示对应的值，这样下拉框的选项就会显示所有键（例如 "site01"、"site02" 等），并且 `ng-model` 的 `site` 变量会绑定到选定的键。 2. **选择与绑定**：在 `myCtrl` 示例中，下拉框的选项是基于 ...
angularJS12-ng-repeat 指令用在一个对象数组上
WEB架构师- Facestrap
03-03 959
{name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> 循环对象: {{ x.name + ', ' + x.country }}
angularJS-验证用户输入
WEB架构师- Facestrap
03-03 504
Email: 不是一个合法的邮箱地址 在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。
angularJS11-ng-repeat 来循环数组
WEB架构师- Facestrap
03-03 374
名字: var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); 使用 ng-model 指令来绑定输入域的值到控制器的属性。
angularJS-应用状态
WEB架构师- Facestrap
03-03 345
Email: 编辑邮箱地址，查看状态的改变。 状态 Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。 Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。 Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。
AngularJS入门指南
"AngularJS: Up and Running 是一本权威的AngularJS教程，旨在帮助读者从基础到高级概念逐步掌握这个JavaScript框架。本书由在Google参与AngularJS开发的工程师Shyam Seshadri和Brad Green撰写，适合JavaScript初学...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值