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. css3在不同型号手机浏览器上的兼容一览表

    网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看.  以下资料由微信产品部"白树"整理, 转载请注明. √:完全支持   ...

  2. android 混淆文件proguard.cfg详解

    -optimizationpasses 5  [代码压缩级别]-dontusemixedcaseclassnames [混淆时不会产生形形色色的类名 ]-dontskipnonpubliclibrar ...

  3. swift UIImage加载远程图片和圆角矩形

    UIImage这个对象是swift中的图像类,可以使用UIImageView加载显示到View上. 以下是UIImage的构造函数: init(named name: String!) -> U ...

  4. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 成熟组件化运行效果分解

    1:成熟的组件就是可以写很少的代码,可以实现很多功能.2:又可以用源码方式调用,又可以用dll方式调用.3:不需要学习里面的细节,只要会调用就可以了.4:成熟稳定,功能齐全,bug少,甚至没bug.5 ...

  5. Android 系统稳定性 - ANR（二）（转）

    编写者:李文栋P.S. OpenOffice粘贴过来后格式有些混乱. 1.2 如何分析ANR问题 引起ANR问题的根本原因,总的来说可以归纳为两类: 应用进程自身引起的,例如: 主线程阻塞.挂起.死循 ...

  6. WampServer下如何实现多域名配置（虚拟域名配置）

    之前在学习跨域的时候,我写过一篇叫做WampServer下使用多端口访问的文章,默认的 localhost 采用的是 80 端口,能使用多端口访问的核心是得新建一个端口,也就是新建一个 http 服务 ...

  7. 解决Package illuminate/html is abandoned, you should avoid using it. Use laravelcollective/html instead.问题

    解决步骤: 1.分析问题是因为laravel5.1不赞成使用illuminate/html而推荐使用laravelcollective/html包,所以我们利用composer命令移除illumina ...

  8. js 0.1+0.2!=0.3

    准确的说就是js小数采用ieee的64位的双精度,1位表示正负,11位指数,52位小数,所以对于0.1js是无法精确表示的的,所以会多点, http://www.jb51.net/article/77 ...

  9. Java 自动装箱与拆箱(Autoboxing and unboxing)

    什么是自动装箱拆箱 基本数据类型的自动装箱(autoboxing).拆箱(unboxing)是自J2SE 5.0开始提供的功能. 一般我们要创建一个类的对象实例的时候,我们会这样: Class a = ...

  10. XSS attack

    <html> <form action="" method="post"> <input type="text" ...