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. MySQL导入sql脚本错误：2006 - MySQL server has gone away

    到如一些小脚本很少报错,但最近导入一个10+M的SQL脚本,却重复报错: Error occured at:2014-03-24 11:42:24 Line no.:85 Error Code: 20 ...

  2. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  3. [转]考虑 PHP 5.0~5.6 各版本兼容性的 cURL 文件上传

    FROM : https://segmentfault.com/a/1190000000725185 最近做的一个需求,要通过PHP调用cURL,以multipart/form-data格式上传文件. ...

  4. QT 网络编程一

    QT如果要进行网络编程首先需要在.pro中添加如下代码:QT += network 在头文件中包含相关头文件 #include <QHostInfo> #include <QNetw ...

  5. TinyFrame升级之三：逻辑访问部分

    在上一篇,我们打造了自己的数据访问部分,这篇,我们准备讲解如何打造逻辑访问部分. 在上一篇中,我们利用Repository模式构建了基于泛型的操作合集.由于这些操作的合集都是原子性的操作,也就是针对单 ...

  6. Alpha阶段事后分析报告

    每个团队编写一个事后分析报告,对于团队在Alpha阶段的工作做一个总结. 请在2016年11月24日上课之前根据下述博客中的模板总结前一阶段的工作,发表在团队博客上,并在课上的事后分析会上进行汇报,并 ...

  7. 套用GGTalk做项目的经验总结——GGTalk源码详解系列（一）

    坦白讲,我们公司其实没啥技术实力,之所以还能不断接到各种项目,全凭我们老板神通广大!要知道他每次的饭局上可都是些什么人物! 但是项目接下一大把,就凭咱哥儿几个的水平,想要独立自主.保质保量保期地一个个 ...

  8. 从零开始打造个人专属命令行工具集——yargs完全指南

    前言 使用命令行程序对程序员来说很常见,就算是前端工程师或者开发gui的,也需要使用命令行来编译程序或者打包程序 熟练使用命令行工具能极大的提高开发效率,linux自带的命令行工具都非常的有用,但是这 ...

  9. Toxy新手指南

    Neuzilla出品 官方网站:http://toxy.codeplex.com QQ群:297128022 官方微信公众号: Toxy 是干嘛用的?它是.NET平台上的文件抽取框架,主要解决各种格式 ...

  10. java并发：线程同步机制之ThreadLocal

    1.简述ThreadLocal ThreadLocal实例通常作为静态的私有的(private static)字段出现在一个类中,这个类用来关联一个线程.ThreadLocal是一个线程级别的局部变量 ...