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. 放松跑、间歇跑、节奏跑和LSD

    放松跑(easy run),顾名思义,是没有负担的跑步,通常用于高强度训练之间,让机能得到恢复. 间歇跑(intervals),又叫变速跑,通常是用高于实际比赛速配速的速度进行反复短距离的快跑,当中配 ...

  2. Spring Security笔记：解决CsrfFilter与Rest服务Post方式的矛盾

    基于Spring Security+Spring MVC的web应用,为了防止跨站提交攻击,通常会配置csrf,即: <http ...> ... <csrf /> </ ...

  3. Nodejs进阶：核心模块net入门与实例讲解

    模块概览 net模块是同样是nodejs的核心模块.在http模块概览里提到,http.Server继承了net.Server,此外,http客户端与http服务端的通信均依赖于socket(net. ...

  4. 283 Move Zeroes

    /** * 题意:将0挪到末尾,并且不改数组中原有元素的顺序 * 解析:找到0元素,然后寻找其后面非0的元素,进行交换位置 * @param {number[]} nums * @return {vo ...

  5. PHP 页面跳转方法

    1.php header()函数跳转 PHP的header()函数非常强大,其中在页面url跳转方面也调用简单,使用header()直接跳转到指定url页面,这时页面跳转是302重定向: $url = ...

  6. Excel导入导出（篇二）

    <body> <h3>一.Excel导入</h3> <h5>.模板下载:<a href="UpFiles/TemplateFiles/学 ...

  7. [CF#290 Div.1 C]Fox And Dinner（最大流）

    题目:http://codeforces.com/contest/512/problem/C 题目大意:给你若干个数,让你分成k组,每组围成一个圆,使得相邻两个数和均为素数,且每组人数应>=3个 ...

  8. Social Emotional Computing -价值观的运算

    第三节 价值观的运算 第三节  价值观的运算 由于价值观的客观本质就是事物的价值率,因此价值观的运算在客观本质上就是价值率的运算.由于价值观的运算就是为了揭示不同事物价值观之间的函数关系,因此价值观的 ...

  9. memcached安装配置

    简述: memcached,开源的分布式缓存数据系统.高性能的NOSQL . Linux 一.环境配置与安装 01.编译准备环境 yum install -y gcc make cmake autoc ...

  10. 【JavaEE企业应用实战学习记录】authorityFilter

    package sanglp.servlet; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import ja ...