AngulairJS表单输入验证与mvc
AngulairJS表单输入验证
1.表单中,常用的验证操作有:$dirty 表单有填写记录、$valid 字段内容合法的、$invalid 字段内容是非法的、$pristine 表单没有填写记录、$error 表单验证不通过的错误验证信息.
2.验证时,需给表单及需要验证的input设置name属性
给form和input设置name后,会将form表单信息,默认绑定到$scope作用域中。故,可以使用formName.inputname.$验证操作得到验证结果
例如:formName.inputName.$dirty="true"表单被填过
formName.inputName.$valid="true"表单输入不合法
formName.inputName.$error.required="true"表单必填但未填
$error支持的验证required/minlength/maxlength/pattern/email/number/date/url等
3.为避免冲突,例如使用type="email" 时,H5也会进行验证操作。如果只想使用AngulaiJS验证,3.为避免冲突,例如使用type="email" s时,H5也会进行验证操作。如果只想使用AngulaiJS验证。
总体流程是,先布局,再给input设置name等属性,在提示位置加入ng-show等属性达到想要的效果。
AngularJS中的mvc
model(模型):应用程序中用于处理数据的部分。(保存或修改数据到数据库的,变量等)。AngularJS中的model特指的是数据:数据
view(视图):用户看到的用于显示数据的页面
工作原理:用户从视图层发出请求,controller接收到请求后转发给model处理,model处理完后返回后给controller,并在view层
反馈给用户。
具体流程是:
创建一个angular模块,即ng-app所绑定部分,需传递两个参数:
①模块名称,即ng-app所需要绑定的名称。ng-app="myapp"
②数组:需要注入的模块名称,不要可为空
在angular模块上,创建一个控制器controller,需要传递两个参数
①controller名称即ng-controller所需要绑定的名称。ng-controller="mycontroller"
②controller的构造函数。构造函数可以传入多个参数,包括$scope/$rootScope以及各种系统内置对象;
[AngularJS中的作用域]
①$scope:局部作用域,声明在$scope上的属性和方法只能在当前controller中使用;
②$rootScope:根作用域,声明在$rootscope上的属性和方法可以在ng-app所包含的任何部分使用(无论是否同一个cntroller或是否在
controller包含范围中
若没有使用$scope声明变量而直接在html中使用ng-model变量的作用域为
1如果ng-model在某个ng-controller中则此变量会默认绑定到大跟前controller 的$sope上
2.如果bg-model没有任何一个ng-controller中,则此变量绑定在$rootscope上;
AngulairJS表单输入验证与mvc的更多相关文章
- 微信小程序 --- 表单输入验证(手机号、邮箱验证、输入非空)
js代码 Page({ /** * 页面的初始数据 */ data: { indicatorDots: false, ...
- 纯css实现表单输入验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- 前端MVC Vue2学习总结(五)——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- Go-Web编程_表单_0x02_验证表单的输入
开发Web的一个原则就是,不能信任用户输入的任何信息,所以验证和过滤用户的输入信息就变得非常重要,我们经常会在微博.新闻中听到某某网站被入侵了,存在什么漏洞,这些大多是因为网站对于用户输入的信息没有做 ...
- Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- Spring Boot构建的Web项目如何在服务端校验表单输入
本文首发于个人网站:Spring Boot构建的Web项目如何在服务端校验表单输入 这个例子用于演示在Spring Boot应用中如何验证Web 应用的输入,我们将会建立一个简单的Spring MVC ...
- easyui表单多重验证,动态设置easyui控件
要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最 ...
- HTML5 总结-表单-输入类型
HTML5 Input 类型 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url nu ...
随机推荐
- Set和Map数据
es6新的数据结构 1.Set:构造函数 const s = new Set ([1,2,3]); console.log(s)//Set(3){1,2,3};[...s];//[1,2,3]cons ...
- ThreadLoacl 小记
参考地址: https://www.cnblogs.com/dolphin0520/p/3920407.html ThreadLoacl 本地线程变量 为线程创建一个副本, 一个内部类ThreadLo ...
- js 定义一个对象并且给对象赋值方法
var obj={}; obj.a="12"; obj.b="13" var o ={}; o.jsonObj=obj; 取得属性值直接用 obj.a; ob ...
- APP-12-视觉技术-身份证识别
1.Postman测试 图片转换为Base64:http://imgbase64.duoshitong.com/ Base64: Base64数据去掉表头文件:data:image/png;base6 ...
- js 提示框的实现---组件开发之(一)
自己做了一个简单的提示框,供自己使用,也可以供他人参考,看懂此文,是理解组件开发的入门 思路比较简单: 1.常规写法: 1.1. 创建一个构造函数 1.2. 给构造函数的原型对象添加show 和hid ...
- compose配置文件参数详解
转自:https://www.cnblogs.com/jsonhc/p/7814138.html 本文介绍compose配置文件参数的使用,熟练编写compose文件 [root@docker lnm ...
- UNITY 优化之带Animator的Go.SetActive耗时问题,在手机上,这个问题似乎并不存在,因为优化了后手机上运行帧率并未明显提升
UNITY 优化之带Animator的Go.SetActive耗时问题,在手机上,这个问题似乎并不存在,因为优化了后手机上运行帧率并未明显提升 经确认,这个问题在手机上依然存在,不过占的比例非常小.因 ...
- 23.网络.md
目录 1.基本概念 2.常用函数 3.端口 4.协议 4.1.2代码步骤 4.1.3UDPDemo 4.1.4通信格式 4.1.5 群发Demo: 4.1.6丢失数据的情况 4.2TCP 4.2.1三 ...
- ArcGIS Python编程案例-电子资料链接
ArcGIS Python编程案例(1)-Python语言基础 https://www.jianshu.com/p/dd90816d019b ArcGIS Python编程案例(2)-使用ArcPy编 ...
- C# windows服务:C#windows服务中的Timer控件的使用
C# windows服务程序中的Timer控件的使用问题是如何解决的呢? 今天和同事一起研究了下C# windows服务程序中的Timer控件的使用的写法. 我们在建立一个C# windows服务程序 ...