Angular.js实现注册系统的实例详解


Posted in Javascript onDecember 18, 2016

前言

相信大家在做项目里经常需要登录注册,那么在用angularjs该如何实现。下面让我们通过angualr.js来实现注册系统表单验证。

Angular下载地址:https://code.angularjs.org/1.5.0/angular.js

首先看一下页面效果(通过bootstrap实现的布局样式):

Angular.js实现注册系统的实例详解 

当我们点击提交按钮时,会根据表单验证,若通过,则没有提示语句,若不通过,则会弹出响应提示语句,当然该功能可以通过其他简单方式实现,这里只是通过实战对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); //控制台打印用户输入的内容
   } 
  }11 })

注意:

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

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

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

Angular.js实现注册系统的实例详解 

 Angular.js实现注册系统的实例详解

下面是提示语部分,单独拿出来说一下:

<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>
 </div>
$scope.isDis = false;
  $scope.isWr = false;
  $scope.myTogOne = function(){
   $scope.isWr = !$scope.isWr;
  }
  $scope.myTogTwo = function(){
   $scope.isDis = !$scope.isDis;
 }

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

Angular.js实现注册系统的实例详解 

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

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

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
js Function类型
Dec 04 Javascript
JavaScript之自定义类型
May 04 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
小程序实现多列选择器
Feb 15 Javascript
js实现网页随机验证码
Oct 19 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 #Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 #Javascript
纯js实现悬浮按钮组件
Dec 17 #Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 #Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 #Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 #Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 #Javascript
You might like
PHP4实际应用经验篇(9)
2006/10/09 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
PHP 万年历实现代码
2012/10/18 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python的设计模式编程入门指南
2015/04/02 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
气象学专业个人求职信
2014/03/15 职场文书
根叔历年演讲稿
2014/05/20 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
2015入党自荐书范文
2015/03/05 职场文书
素质拓展训练感想
2015/08/07 职场文书