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 相关文章推荐
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
php给数组赋值的实例方法
2019/09/26 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
Python中的is和id用法分析
2015/01/26 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
简单了解Django项目应用创建过程
2020/07/06 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
总经理职责范文
2013/11/08 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
小兵张嘎观后感
2015/06/03 职场文书
长征观后感
2015/06/09 职场文书
军训后的感想
2015/08/07 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers