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

前言

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

有角的下载地址：https://代码。安格拉js。org/15 .0/角度。射流研究…

首先看一下页面效果（通过引导程序实现的布局样式):

当我们点击提交按钮时，会根据表单验证，若通过，则没有提示语句，若不通过，则会弹出响应提示语句，当然该功能可以通过其他简单方式实现，这里只是通过实战对有角的进一步深入理解。

实现方法如下：

页面布局代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge '//设置按照边缘浏览器渲染方式渲染元名称=“视口”内容=“宽度=设备宽度，最小比例=1.0,最大比例=1.0,用户可缩放=无'//设置页面宽度，缩放比例，用户不能缩放标题注册/title link rel='样式表href='bootstrap.min.css '样式输入{ outline ne : none//去掉铬浏览器输入框内的蓝色边框}/style/head body ng-app=' myApp ' div ng-controller=' myCTr ' div class=' container ' H2 class=' text-center '注册系统/h2 div class='row '表单名称='我的表单' class='表单-水平' div class=' form-group ' div class=' col-xs-3 col-xs-offset-1 '可用于='用户名'用户名：/labl/div class=' col-xs-8 '输入id='用户名'类型=' text ' ng-model=' data。 username ' name=' username ' ng-required=' true '/ng-required=' true '是设置输入框内必须填写内容，下同/div/div class=' form-group ' div class=' col-xs-3 col-xs-offset-1 '可用于='电话'电话：/label/div class=' col-xs-8 '输入id=' tel ' type=' text ' ng-model=' data。tel ' name=' tel ' ng-pattern='/^1\d{10}$/' ng-required=' true '/ng-pattren='/XXX/'是设置正则验证，下同/div/div class=' form-group ' div class=' col-xs-3 col-xs-offset-1 '可用于=“地址”地址：/label/div class=' col-xs-8 '输入id=' address ' type=' text ' ng-model=' data。address ' name=' address ' ng-必需=' true '/div/div class=' form-group ' div class=' col-xs-3 col-xs-offset-1 '标签为=' email '邮箱：/labl/div class=' col-xs-8 '输入id=' email ' type=' text ' ng-model=' data。“电子邮件”名称=“电子邮件”ng-pattern='/^([a-za-z0-9_-])[emailprotected]([a-za-z0-9_-])(。[a-Za-Z0-9 _-])/' ng-required=' true '/div/div class=' col-xs-8 col-xs-offset-4 text-danger ' style=' height :30 px；飞越：隐藏；p ng-show='我的表单。用户名。$无效的myForm.username.$dirty '请填写用户名/p p ng-show='我的表单。同$无效的myForm.tel.$dirty '请填写正确电话/p p ng-show='我的表单。地址。$无效的myForm.address.$dirty '请填写地址/p p ng-show='我的表单。电子邮件。$无效的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脚本src=' http 3360 angular。量滴js '/脚本/正文/html如上页面布局代码，记得引入bootstrap.cssangular.js，ng-必需；尼日利亚型功能等同于H5新属性：必需；模式，另外还有残疾人；readonly(ng-disbaled；ng-readonly)，本文后面会介绍其用法。

射流研究…代码：

var app=angular.module('myApp '，[])；app.controller('myCtr '，函数($ scope){ $ scope . data={ }；//存储用户输入的内容，方便在后台调用$ scope.showAllErr=false//提示消息$ scope。check=function () {$ scope。showallerr=$ scope。我的表单。默认情况下不显示$ invalid//当内容非法时，显示内容($invalid=true)，可以是console . log($ scope)；发现$ invalid、$ dirty、$ valid、$ pristiniif($ scope . my form . $ valid){ console . log($ scope . data)；//控制台打印用户输入} }11})注意：

yes console . log($ scope)；发现$无效、$脏、$有效、$优先(意思是：非法、已修改、合法、未修改)

打开控制台，找到console . log($ scope)；对于打印出来的内容，可以通过查找表单的名称字段找到以上四个属性，也可以通过查找表单中输入框的名称字段找到以上四个属性。

在此之前，我们必须将name字段添加到表单中，例如，我将其设置为name='myForm '，这样我就可以找到myForm，并且输入是相同的

以下是提示部分。让我们分别拿出来：

div class=' col-xs-8 col-xs-offset-4 text-danger ' style=' height :30 px；' overflow:hidden'P ng-show=' myform.username. $无效myform.username. $ dirty '请填写用户名/p p ng-show=' myform.tel. $无效myform.tel. $ dirty '请填写正确的电话号码/P p ng-show=' myform.address. $无效myform.address. $ dirty '请填写地址/p p ng-show=' myform.email. $无效myform.email. $ dirty '请填写正确的电子邮件地址/P P P ng-show=' show allrr '，设置为只显示一行；

Ng-show=' myform。用户名。myform无效。用户名。$ dirty '，我们默认不提交是合法的，没有修改过。并且因为$ scope.showAllErr=false

因此，任何提示都是不现实的，但是一旦满足这些条件，my form . username . $ invalid=true my form . username . $ dirty=true，就会显示上述提示中的相应内容。关于

显示那一个，根据对应的字段，如果是用户名，则是“请填写用户名”，电子邮件字段，然后.(字段为name='XXX '，当然可以为不同的输入框定义不同的字段。

如上所述，它们还有四个属性：$无效，$脏，$有效，$原始)

如果什么都没有填写，则该表单是非法的，即$scope.myForm.$invalid=true，提示“请填写”。

再说一遍ng-disabled；ng-readonly:

将上述代码添加到以下内容中：

div class='col-xs-8 '输入id=' address ' type=' text ' ng-model=' data . address ' name=' address ' ng-required=' true ' ng-disabled=' isdis ' button ng-click=' myto gtwo()' togtwo/button/div class=' col-xs-8 '输入id=' tel ' type=' text ' ng-model=' data . tel ' name=' tel ' ng-pattern='/^1\ d { 10 } $/' ng-required=' true ' ng-readonly$ scope.isWr=false$ scope . mytogone=function(){ $ scope . iswr=！$ scope.isWr} $ scope . mytogtwo=function(){ $ scope . isdis=！$ scope.isDis}您可以通过单击按钮在只读输入框、可写输入框、可用输入框和不可用输入框之间切换

增加两个事件：ng-change；ng-提交

Ng-change:用于检测用户输入是否改变。

Ng-submit:用于检测表单提交事件，并且只能用于表单元素(意味着它仅对表单本身有效)

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。