前言
相信大家在做项目里经常需要登录注册,那么在用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元素(意只对表单本身有效)
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
本文向大家介绍Python实现注册登录系统,包括了Python实现注册登录系统的使用技巧和注意事项,需要的朋友参考一下 表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮
本文向大家介绍Shell脚本注册到Linux系统服务实例,包括了Shell脚本注册到Linux系统服务实例的使用技巧和注意事项,需要的朋友参考一下 注册一个系统服务,开机自启动. 1 脚本编写 #vim test.sh 2注册服务 3.删除服务
本文向大家介绍django实现用户注册实例讲解,包括了django实现用户注册实例讲解的使用技巧和注意事项,需要的朋友参考一下 创建一个apps包 专门来放子应用 创建users子应用 处理用户事务 追加导包路径 在settings中用 print(sys.path) 查看现有导包路径 但是这样过于low 换成下面这样 这样就可以简化导包方式 自定义用户模型类 django自带的用户模型类User
本文向大家介绍IOS 粒子系统 (CAEmitterLayer)实例详解,包括了IOS 粒子系统 (CAEmitterLayer)实例详解的使用技巧和注意事项,需要的朋友参考一下 一、系统剖析 在UIKit中,粒子系统由两部分组成: · 一个或多个CAEmitterCells:发射器电池可以看作是单个粒子的原型(例如,一个单一的粉扑在一团烟雾)。当散发出一个粒子,UIKit根据这个发射粒
本文向大家介绍WinForm实现最小化到系统托盘方法实例详解,包括了WinForm实现最小化到系统托盘方法实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了WinForm实现最小化到系统托盘方法。分享给大家供大家参考。具体分析如下: 有个叫NotifyIcon的控件 1、建个WinForm项目,其它操作略过。 2、拉个NotifyIcon控件,将属性Visable设置成False,在
本文向大家介绍Asp.Mvc 2.0实现用户注册实例讲解(1),包括了Asp.Mvc 2.0实现用户注册实例讲解(1)的使用技巧和注意事项,需要的朋友参考一下 最近一直在研究ASP.NET MVC,看了一些教程,总觉得印象不是太深刻,于是决定动手写一个系列的MVC教程,一方面是为了加深自己的印象,另一方面也给学习MVC的同学提供一些帮助,作为一个参考资料。本系列的教程将通过一个实例来由浅入深讲解M
本文向大家介绍Angular.js之作用域scope'@','=','&'实例详解,包括了Angular.js之作用域scope'@','=','&'实例详解的使用技巧和注意事项,需要的朋友参考一下 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执行环境。作用域有层次结构,这个层次和相应的 DOM 几乎是一样的。作用域能监控表达式和传递事件。 在 H
本文向大家介绍利用iOS实现系统相册大图浏览功能详解,包括了利用iOS实现系统相册大图浏览功能详解的使用技巧和注意事项,需要的朋友参考一下 前言 本文主要给大家介绍了关于iOS实现系统相册大图浏览功能的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 最终效果图 大图浏览 实现过程 创建两个UICollectionView分别放置大图和缩略图 实现大图和缩略图的联动 实现