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 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
js实现翻牌小游戏
Jul 31 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
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
在Python的web框架中配置app的教程
2015/04/30 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python基本语法练习实例
2017/09/19 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python3.4解释器用法简单示例
2019/03/22 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
生物制药专业求职信
2014/03/11 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
综合测评自我评价
2015/03/06 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
浅析Python实现DFA算法
2021/06/26 Python