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 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
vuex如何重置所有state(可定制)
Jan 17 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
德生1994机评
2021/03/02 无线电
php实现mysql数据库备份类
2008/03/20 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
如何在PHP中使用数组
2020/06/09 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
python抓取网页内容示例分享
2014/02/24 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
python3获取url文件大小示例代码
2019/09/18 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
python 实现简单的FTP程序
2019/12/27 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
美国批发供应商:Kole Imports
2019/04/10 全球购物
酒店副总经理岗位职责范本
2014/02/04 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
学校推普周活动总结
2015/05/07 职场文书
建党伟业观后感
2015/06/01 职场文书
田径运动会广播稿
2015/08/19 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
Oracle 多表查询基本语法实例
2022/04/18 Oracle