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. Javascript备忘复习笔记1

    一.字符串操作 1.大小写 var s = "hello"; undefined g = s.toUpperCase(); "HELLO" g; "H ...

  2. JS的递归与TCO尾调用优化

    转自:https://segmentfault.com/a/1190000004018047 这两天搜了下JS递归的相关文章, 觉得这篇文章很不错, 就顺手翻译了下,也算给自己做个笔记,题目是我自己加 ...

  3. Linux中 groupadd 和 useradd 的命令说明

    groupadd [options] group 说明The groupadd command creates a new group account using the values specifi ...

  4. BZOJ 1010 【HNOI2008】 玩具装箱toy

    Description P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1... ...

  5. C#计算文件的MD5值实例

    C#计算文件的MD5值实例 MD5 是 Message Digest Algorithm 5(信息摘要算法)的缩写,MD5 一种散列(Hash)技术,广泛用于加密.解密.数据签名和数据完整性校验等方面 ...

  6. log4j2 与 spring mvc整合

    log4j2不仅仅是log4j的简单升级,而是整个项目的重构,官网地址:http://logging.apache.org/log4j/2.x/,大家可以从官网的介绍看出它相比log4j第1代的种种优 ...

  7. mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理

    1.mvc5+ef6+Bootstrap 项目心得--创立之初 2.mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理 3.mvc5+ef6+Bootstrap 项目心得--WebG ...

  8. HTML5+JS 《五子飞》游戏实现（六）鼠标响应与多重选择

    上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的.另外因为是网页游戏,所以一定要实现鼠标单击棋子可以进行操作. 当鼠标移动棋子上面后,切换鼠标指针为手形,移 ...

  9. express-partials与express4.x不兼容问题

    在express中设置view engine为html,express-partials会导致语法不正确,其实只要做一行代码的改动就可以 function renderer(ext){ if(ext[ ...

  10. php上传文件

    php部分: <?php /* 注释:允许用户上传文件是一个巨大的安全风险. 请仅仅允许可信的用户执行文件上传操作. */ header("Content-type: text/htm ...