AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
这一节相对来说需要理解的东西不是太多,记住了那些api就行了。
还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释。
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head><meta charset="UTF-8"><title>Title</title> </head> <div ng-controller="Aaa"><form novalidate name="nForm"><div><label>用户名</label><input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)"><span ng-repeat="re in regText.regList|filter:regText.regVal">{{re.tips}}</span></div><div><label>密码</label><input type="text" name="nPassword" ng-model="regPassword.name" required ng-minlength="6" ng-blur="change('regPassword',nForm.nPassword.$error)"><span ng-repeat="re in regPassword.regList|filter:regPassword.regVal">{{re.tips}}</span></div></form> </div> <body> <script src="angular.min.js"></script> <script>var m1=angular.module("myApp",[]);m1.controller("Aaa",["$scope", function ($scope) {$scope.regText = {regVal : 'default',regList : [{ name : 'default' , tips : '请输入用户名'},{ name : 'required' , tips : '用户名不能为空'},{ name : 'pattern' , tips : '用户名必须是字母'},{ name : 'pass' , tips : '√'}]};$scope.regPassword = {regVal : 'default',regList : [{ name : 'default' , tips : '请输入密码'},{ name : 'required' , tips : '密码不能为空'},{ name : 'minlength' , tips : '密码至少6位'},{ name : 'pass' , tips : '√'}]};$scope.change=function(reg,err){for(var attr in err){if(err[attr]==true){$scope[reg].regVal=attr;return;}}$scope[reg].regVal="pass";}}]); </script> </body> </html>
1.模块module
模块这东西的好处我还没有体会出来,可能是因为做的东西代码量还太小。它的功能基本上是讲代码按照功能分成若干块,这样就可以有效地防止controller的混乱(在我看来就是再来一级分类管理)。
具体代码就是
html中
<html lang="en" ng-app="myApp">
其中"myApp"就是这个模块的名字
对应的js代码
var m1=angular.module("myApp",[]);
其中,第二个参数是这个模块需要依赖的模块。
当然,controller的写法也要变一变了,至少你得告诉程序你这个controller是写在哪个模块里的吧。
m1.controller("Aaa",["$scope",function($scope){ //code }]);
其中$scope是注入的服务
2.表单相关
表单验证相关操作其实大部分是在标签内写的
<input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)">
这几个api是啥意思就不仔细说了,反正意思就是一些字符串验证的规则,想要通过就必须符合这些规则。当然,如果你只想告诉用户通不通过而不想写那么多原因的话大可以一个正则搞定。重点是:通不过会发生什么? 很简单,通不过的话ng-model对应的变量值就是 undefined。另外一个值得注意的问题是何时触发验证,改变验证提示(提示内容还是需要写逻辑的)。有一类是像百度搜索提示那样,输入内容改变一下就触发一次,但是实际上对于表单验证来说这样做并不合适,因为1.其实你只需要在用户觉得输入完了验证,这样做会增加不少不必要的代码运行2.如果你设置了类似于字段长度之类的限制,在输入到一半的时候可能跳出来”长度不够”之类的。要是我遇到这种表单验证,心里肯定会默默骂一句:我tm还没敲完呢。所以在input标签失去焦点的时候进行验证还是不错的,因为这时基本上可以代表用户觉得我输入完了。实际不早也不晚。
3.ng-repeat和filter
<span ng-repeat="re in regPassword.regList|filter:regPassword.regVal">{{re.tips}}</span>
ng-repeat在我看来就是根据数据长度来自定义html结构的 常用在<li> <table>之类的数据展示情景中。写起来有点像for in循环
比如上面的例子,在不考虑filter的情况下,span标签的数量就是regPassword.regList中的元素个数,这个用来遍历的对象可以是数组或者对象。
filter的作用就是在它们当中筛选出需要的字符串,当然还有其他的过滤器,自己看看就明白了,都是api。filter的意思是筛选出符合regPassword.regVal的re。嗯,当然后面写个true的话就变成了不是包含而是必须完全匹配。
这一部分相对简单,所以能省则省。下一步写关于angular非常重要的一部分,路由(ng-route)。
转载于:https://www.cnblogs.com/zhangdongming/p/5396881.html
AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)相关推荐
- ASP.NET MVC 2 学习笔记二: 表单的灵活提交
ASP.NET MVC 2 学习笔记二: 表单的灵活提交 前面说到有做到公司内部的一个请假系统,用的是ASP.NET MVC 2+Entity Framework.虽然EF(Entity Frame ...
- HTML学习笔记二--表单及表格的结合使用个人简历制作
部分内容转自:https://www.cnblogs.com/inmeditation/p/12171727.html 一.表格 1.表格标签 表格由 <table> 标签来定义.每个表格 ...
- 前后端分离学习笔记(5) ---[表单的增删改操作;以及为管理员上传头像]
上一篇案例中也是查询到了表单的内容–>前后端分离学习笔记(4) -[路由嵌套, 查询表单显示] 文章目录 1.前端组件页面 添加管理员操作 修改管理员信息 删除管理员 为管理员上传头像 修改密码 ...
- python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式
本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍 表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...
- html表单验证案例,HTML5表单验证(4个实用的表单美化案例)
multipart/form-data 在使用包含文件上传控件的表单时,必须使用 autocomplete="on" 自动补全功能 novalidate 不验证 placehold ...
- 阿ken的HTML、CSS的学习笔记_表单的应用(笔记七)
欢迎光临 你好 我是阿ken 文章目录 7.1_认识表单 7.1.1_表单的构成 7.1.2_创建表单 ( < form> 标记 ) 7.2_表单属性 1. action 属性 2. me ...
- 【前端】JS的BOM和DOM,事件,表单验证案例
先看小练习1:开关灯 用到的Dom相关知识点 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element* document.getElementById("id值&qu ...
- 小白读《锋利的jQuery(第2版)》第五章学习笔记(表单、表格)
表单应用 表单3个组成部分 表单标签 表单域 表单按钮 单行文本框应用 获取和失去焦点改变样式. 示例: HTML <form action="#" method=" ...
- 笔记:表单验证以及sweetalert中swal的使用
1.表单验证jsp页面表单样例 <div class="input-group input-group-lg"><span class="input-g ...
最新文章
- 桌面计算机休眠快捷键,如何快速建立Win 7桌面一键休眠快捷方式
- 卷积神经网络 全连接层(稠密层)是什么?(全连接层就是每一个结点都与上一层的所有结点相连的网络层)
- libevent源码学习-----阅读心得
- 笔记2014-08-26
- 2.SDK目录结构和adb工具及命令介绍
- qt designer 弹出输入框_Qt编写的项目作品3-输入法V2018
- 导入csv_使用ADManager Plus从CSV批量导入用户
- 检错纠错码(奇偶校验码 CRC循环冗余校验码 海明码)
- 学习Java. 基础 17: 二维数组
- ds5100更换电池 ibm_IBMDS5100更换电池
- 详解Linux与Unix系统的区别与联系
- mac提示“已损坏,无法打开。 您应该将它移到废纸篓“的终极解决方案
- 09年软件评测师考试下午试题答案
- 【MCU】基于STM32CubeMX定时器中断实现LED闪烁
- 三类6种地图可视化软件测评,最好用的工具居然是它
- 冒泡排序法(C语言)
- 分享 13 个可以在线制作 360 度全景视图的网站
- ZZULIOJ1025
- 强化学习的10个现实应用
- 基于Mtk平台的android camera hal3学习
热门文章
- layui table 字体大小_layui table设置某一行的字体颜色方法
- c语言中的tanh函数,tanh()函数,用于C ++中的复数
- 起一个数的平方根_使用二分法计算一个数的算术平方根
- 记录一下matlab三维柱状图调色详细步骤
- 膨胀腐蚀操作(MATLAB)
- skipping non-radio button in group解决方法
- python redis处理高并发-Python高并发解决方案实现过程详解
- 学习笔记《Java多线程编程实战指南》四
- Phalcon 訪问控制列表 ACL(Access Control Lists ACL)
- Codeforces Round #383 (Div. 1) C(二分图)