首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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元素（意只对表单本身有效）

总结

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

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

- Author -

AnJikx

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript （用setTimeout而非setInterval）
Dec 28 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 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
铁拳(1) 死亡搁浅(1) BCLer(1) 模拟人生(1) AGC(1) 原神(1) 吸血鬼(1) 74HC4066(1) 大话西游(1) FS1016(1)
You might like
用PHP实现维护文件代码
2007/06/14 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
JS前端笔试题分析
2016/12/19 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
举例详解Python中的split()函数的使用方法
2015/04/07 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
深入理解Python异常处理的哲学
2019/02/01 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
美国翻新电子产品商店：The Store
2019/10/08 全球购物
乌克兰鞋类购物网站：Eobuv.com.ua
2020/11/28 全球购物
C语言笔试题
2014/09/04 面试题
网上开商店的创业计划书
2014/01/19 职场文书
亲属关系公证书
2014/04/08 职场文书
企业管理标语
2014/06/10 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL