Angular.js实现注册系统的实例详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Angular.js实现注册系统的实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5843字，纯文字阅读大概需要9分钟。
内容图文
前言
相信大家在做项目里经常需要登录注册，那么在用angularjs该如何实现。下面让我们通过angualr.js来实现注册系统表单验证。
Angular下载地址：https://code.angularjs.org/1.5.0/angular.js
首先看一下页面效果（通过bootstrap实现的布局样式）：
当我们点击提交按钮时，会根据表单验证，若通过，则没有提示语句，若不通过，则会弹出响应提示语句，当然该功能可以通过其他简单方式实现，这里只是通过实战对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同样
下面是提示语部分，单独拿出来说一下：
<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;
}
便可以通过点击按钮实现输入框只读与可写、可用不可用之间的切换
补充两个事件：ng-change;ng-submit
ng-change:用来检测用户输入是否发生变化
ng-submit:用来检测表单提交事件，只可用于form元素（意只对表单本身有效）
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
内容总结
以上是互联网集市为您收集整理的Angular.js实现注册系统的实例详解全部内容，希望文章能够帮你解决Angular.js实现注册系统的实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。