Angular是Google开发的前端技术框架，下载地址：https://code.angularjs.org/1.5.0/angular.js

通过对angular的简单理解后发现，angular通过一些简单的指令即可实现对DOM元素的操作，其特色为双向数据绑定

下面，让我们通过angualr来实现注册系统表单验证。

首先看一下页面效果（通过bootstrap实现的布局样式）：

当我们点击提交按钮时，会根据表单验证，若通过，则没有提示语句，若不通过，则会弹出响应提示语句，当然该功能可以通过其他简单方式实现，这里只是通过实战对angular进一步深入理解。

页面布局代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">　　　　//设置按照edge浏览器渲染方式渲染

     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  //设置页面宽度，缩放比例，用户不能缩放

     <title>注册</title>

     <link rel="stylesheet" href="bootstrap.min.css">

     <style>

         input {

             outline: none; //去掉chrome浏览器输入框内的蓝色边框

         }

     </style>

 </head>

 <body ng-app="myApp">

     <div ng-controller="myCtr">

         <div class="container">

             <h2 class="text-center">注册系统</h2>

             <div class="row">

                 <form name="myForm" class="form-horizontal">

                     <div class="form-group">

                         <div class="col-xs-3 col-xs-offset-1">

                             <lable for="username">用户名：</lable>

                         </div>

                         <div class="col-xs-8">

                             <input id="username" type="text" ng-model="data.username" name="username" ng-required="true">  //ng-required="true"是设置输入框内必须填写内容，下同

                         </div>

                     </div>

                     <div class="form-group">

                         <div class="col-xs-3 col-xs-offset-1">

                             <lable for="tel">电话：</lable>

                         </div>

                         <div class="col-xs-8">

                             <input id="tel" type="text" ng-model="data.tel" name="tel" ng-pattern="/^1\d{10}$/" ng-required="true"> //ng-pattren="/XXX/"是设置正则验证，下同

                         </div>

                     </div>

                     <div class="form-group">

                         <div class="col-xs-3 col-xs-offset-1">

                             <lable for="address">地址：</lable>

                         </div>

                         <div class="col-xs-8">

                             <input id="address" type="text" ng-model="data.address" name="address" ng-required="true">

                         </div>

                     </div>

                     <div class="form-group">

                         <div class="col-xs-3 col-xs-offset-1">

                             <lable for="email">邮箱：</lable>

                         </div>

                         <div class="col-xs-8">

                             <input id="email" type="text" ng-model="data.email" name="email" ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/" ng-required="true">

                         </div>

                     </div>

                     <div class="col-xs-8 col-xs-offset-4 text-danger" style="height:30px;overflow:hidden;">

                         <p ng-show="myForm.username.$invalid && myForm.username.$dirty">请填写用户名</p>

                         <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">请填写正确电话</p>

                         <p ng-show="myForm.address.$invalid && myForm.address.$dirty">请填写地址</p>

                         <p ng-show="myForm.email.$invalid && myForm.email.$dirty">请填写正确邮箱</p>

                         <p ng-show="showAllErr">请填写</p>

                     </div>

                     <div class="form-group">

                         <div class="col-xs-12">

                             <input class="btn btn-success" type="submit" style="width:100%" ng-click="check()">

                         </div>

                     </div>

                 </form>

             </div>

         </div>

     </div>

 <script src="angular.min.js"></script>

 </body>

 </html>

如上页面布局代码，记得引入bootstrap.css;angular.js，ng-required;ng-pattern 功能等同于H5新属性：required; pattern, 另外还有disabled；readonly（ng-disbaled;ng-readonly）,本文后面会介绍其用法。

js代码：

     var app =  angular.module("myApp", []);

     app.controller("myCtr", function($scope) {

         $scope.data = {};　　　　　　//存放用户输入的内容，便于后台调用

         $scope.showAllErr = false; //默认不显示提示信息

         $scope.check = function(){

             $scope.showAllErr= $scope.myForm.$invalid; //当内容不合法时，显示内容（此时$invalid=true），可以console.log($scope);找到$invalid,$dirty,$valid,$pristine

             if($scope.myForm.$valid){

                 console.log($scope.data); //控制台打印用户输入的内容

             }

         }    })

注意：

可以console.log($scope);找到$invalid,$dirty,$valid,$pristine(意思：不合法，被修改，合法，没被修改）

打开控制台，找到console.log($scope);打印的内容，找到表单name字段，即可找到以上四个属性，同样找到表单内输入框中的name字段也可找到以上四个属性。

在此之前，我们要为表单添加name字段，比如我设置为 name="myForm", 所以即可找 myForm 即可，input同样

下面是提示语部分，单独拿出来说一下：

 <div class="col-xs-8 col-xs-offset-4 text-danger" style="height:30px;overflow:hidden;">

                     <p ng-show="myForm.username.$invalid && myForm.username.$dirty">请填写用户名</p>

                     <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">请填写正确电话</p>

                     <p ng-show="myForm.address.$invalid && myForm.address.$dirty">请填写地址</p>

                     <p ng-show="myForm.email.$invalid && myForm.email.$dirty">请填写正确邮箱</p>

                     <p ng-show="showAllErr">请填写</p>

 </div>

style="height:30px;overflow:hidden;">，设置只是显示一行；

ng-show="myForm.username.$invalid && myForm.username.$dirty"，默认状态下我们没有提交当然合法，而且也没有修改；又由于$scope.showAllErr = false;

所以什么提示语也不现实，但是当这些条件一旦满足，myForm.username.$invalid=true  &&  myForm.username.$dirty=true,便会显示以上提示语中对应内容，至于

显示那一条，根据对应的字段显示，若是username，那就是“请填写用户名”，email字段,那就……（字段即 name="XXX",自己为不同的输入框定义不同字段即可，当然了

上面提到过他们也有：$invalid,$dirty,$valid,$pristine 这四个属性）

若是什么也不填写，那就是表单不合法，即 $scope.myForm.$invalid=true，提示 “请填写”。

再说说ng-disabled;ng-readonly:

将上述代码加入下面内容：

 <div class="col-xs-8">

    <input id="address" type="text" ng-model="data.address" name="address" ng-required="true" ng-disabled="isDis">

    <button ng-click="myTogTwo()">toggTwo</button>

 </div>
 <div class="col-xs-8">

     <input id="tel" type="text" ng-model="data.tel" name="tel" ng-pattern="/^1\d{10}$/" ng-required="true" ng-readonly="isWr">

     <button ng-click="myTogOne()">toggOne</button>

4 </div>
         $scope.isDis = false;

         $scope.isWr = false;

         $scope.myTogOne = function(){

             $scope.isWr =  !$scope.isWr;

         }

         $scope.myTogTwo = function(){

             $scope.isDis =  !$scope.isDis;

  }

便可以通过点击按钮实现输入框只读与可写、可用不可用之间的切换

补充两个事件：ng-change;ng-submit

ng-change:用来检测用户输入是否发生变化

ng-submit:用来检测表单提交事件，只可用于form元素（意只对表单本身有效）

Angular实现注册系统的更多相关文章

  1. 用OMT方法建立其分析模型： 本大学基于网络的课程注册系统。

    OMT方法是用3种模型来描述软件系统,分别是对象模型,动态模型,功能模型. 1)对象模型:课程网络注册系统 2)动态模型:序列图 3)功能模型:数据流图 0层DFD图 1层DFD图

  2. <转>ＭＦＣ注册系统/全局热键。

    <转>MFC注册系统/全局热键. 1. BEGIN_MESSAGE_MAP(CRS232TESTDlg, CDialog) //{{AFX_MSG_MAP(CRS232TESTDlg) O ...

  3. python数据库做成邮箱的注册系统!

    #! /usr/bin/env python2.7 # -*- coding:utf-8 -*- #File:w7.py #Date:2013-7-18 #Author:wangyu import r ...

  4. Django用户登录与注册系统

    一.创建项目 1.1.创建项目和app python manage.py startproject mysite_login python manage.py startapp login 1.2.设 ...

  5. Django实战(一)-----用户登录与注册系统5（图片验证码）

    为了防止机器人频繁登录网站或者破坏分子恶意登录,很多用户登录和注册系统都提供了图形验证码功能. 验证码(CAPTCHA)是一种区分用户是计算机还是人的公共全自动程序. 可以防止恶意破解密码.刷票.论坛 ...

  6. 页面注册系统--使用forms表单结合ajax

    页面注册系统--使用forms表单结合ajax 在Django中通过forms构建一个表单 1.urls.py 配置路由 from django.conf.urls import url from d ...

  7. 注册系统所有的dll文件.bat

    @echo off echo 运行后,能重新注册系统所有的dll文件, echo 能解决内存读写错误的问题 pause echo on for %%1 in (%windir%/system32/*. ...

  8. Spring Boot+Jpa（MYSQL）做一个登陆注册系统(前后端数据库一站式编程)

    Spring Boot最好的学习方法就是实战训练,今天我们用很短的时间启动我们第一个Spring Boot应用,并且连接我们的MySQL数据库. 我将假设读者为几乎零基础,在实战讲解中会渗透Sprin ...

  9. Node.js Express连接mysql完整的登陆注册系统(windows)

    windows学习环境: node 版本: v0.10.35 express版本:4.10.0 mysql版本:5.6.21-log 第一部分:安装node .Express(win8系统 需要&qu ...

随机推荐

  1. 判断百度某一经纬度的地图颜色值python

    from PIL import Image import MySQLdb import os import urllib import time from multiprocessing.dummy ...

  2. C# StopWatch的使用

    在做项目的时候,需要输出数据库操作的耗时,自己写了个方法.老大看到后,奇怪我为什么不用现成的.才知道有StopWatch这个类. 属性       名称 说明 Elapsed 获取当前实例测量得出的总 ...

  3. 最佳实践 —— 详细谈谈如何减小APK体积

    转载请注明出处: http://www.cnblogs.com/soaringEveryday/p/5254520.html 随着Android移动开发的需求越来越复杂,我们不可避免的遇到发布出去的a ...

  4. iOS搜索附近的位置（类似微博朋友圈位置）

    说什么都是苍白的,直接上图~ 在某些情况下,我们需要获取用户周边的位置,来让用户选取.例如微信的朋友圈,在发一条朋友圈时可以选择地点,就是使用这样的功能. 基于以上的情况(其实也就是为了模仿微信),有 ...

  5. 如何限制虚拟主机可使用的CPU资源

    使用IIS 6.0运营虚拟主机的朋友们都会碰到这样一个问题,当某个网站占用大量CPU资源时,会把整个服务器都拖慢了,影响服务器上其他网站的访问速度,客户们的投诉也让系统管理员倍感头疼.我们知道,从II ...

  6. Http协议中的Content-Length属性

    Android开发的时候需要与从服务器上获取数据,数据是通过http协议封装的.Android端使用的是Xutils第三方插件来发起http请求,但是每次只能拿到部分数据.通过仔细分析后原来是Cont ...

  7. android 使用多个接口

    今天,好久没有这么用过都忘记可以这样用了.来记录下: 一个类想要使用多个接口可以implements 接口1 , 接口2,...

  8. 屠龙之路_战胜狮身人面怪物_SecondDay

    第二天,少年们跋山涉水来到了恶龙山的山脚.前面有一座迷宫,守卫迷宫的是一只狮身人面的怪物,它出一个谜语让少年们猜,如果屠龙团猜不出答案就会被吃掉(如果你能猜出来,我就让你--),它问:"软件 ...

  9. Bete冲刺第一阶段

    Bete冲刺第一阶段 今日工作: github团队协作流程 web:调整dao层设计,增加新的dao组件 客户端:之前遗留的界面跳转的BUG 目前所遇问题: 第一,COCOAPODS的安装上还是有点问 ...

  10. 开发错误记录9：Application无法跳转到Activity

    今天在做友盟消息推送,当客户端收到推送消息时,如客户端不是活动的,用如下代码 启动Activity发现无法启动,原因是原有的任务栈已消毁,判断启动是如消毁,如有,再新建一个 只要给它添加一个标志 就可 ...