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的更多相关文章

  1. 微信小程序 --- 表单输入验证(手机号、邮箱验证、输入非空)

    js代码 Page({                   /**    * 页面的初始数据    */         data: {         indicatorDots: false,   ...

  2. 纯css实现表单输入验证

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  4. 前端MVC Vue2学习总结(五)——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  5. Go-Web编程_表单_0x02_验证表单的输入

    开发Web的一个原则就是,不能信任用户输入的任何信息,所以验证和过滤用户的输入信息就变得非常重要,我们经常会在微博.新闻中听到某某网站被入侵了,存在什么漏洞,这些大多是因为网站对于用户输入的信息没有做 ...

  6. Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

  7. Spring Boot构建的Web项目如何在服务端校验表单输入

    本文首发于个人网站:Spring Boot构建的Web项目如何在服务端校验表单输入 这个例子用于演示在Spring Boot应用中如何验证Web 应用的输入,我们将会建立一个简单的Spring MVC ...

  8. easyui表单多重验证,动态设置easyui控件

    要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最 ...

  9. HTML5 总结-表单-输入类型

    HTML5 Input 类型 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url nu ...

随机推荐

  1. [记录] Linux Apache隐藏index.php

    1. 在项目更目录下新建 .htaccess <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEng ...

  2. 讲讲亿级PV的负载均衡架构

    引言 本来没想写这个题材的,为了某某童鞋能够更好的茁壮成长,临时写一篇负载均衡的.负载均衡,大家可能听过什么3层负载均衡.4层负载均衡.7层负载均衡什么的?那这是怎么分的呢,ok,是根据osi七层网络 ...

  3. 飞利浦 PHILIPS 电动牙刷HX6730 拆解

    今日,一直比较喜欢用的电动牙刷,飞利浦HX6730坏掉了,初步感觉考虑飞利浦的保修,但是发现发票找不到了.飞利浦的客服也说,电动牙刷的两年保修依据分别是:1.发票开据日期:2.在无发票的情况下,看底部 ...

  4. 通过SSH克隆远程仓库(GitLab)到本地

    由于不是任何用户都能从远程仓库克隆到本地的,也是需要鉴别的,因此本地需要用git bash 创建一个公钥,而远程仓库也要把这个公钥保存下来,进而本地才可以从远程download.主要步骤如下: 1.首 ...

  5. 浅谈MySQL事务及隔离级别

    目录 1.什么是事务 2.事务的ACID属性 2-1.原子性(Atomicity) 2-2.一致性(Consistency) 2-3.隔离性(Isolation) 2-4.持久性(Durability ...

  6. 前后台联调,突然所有的接口请求状态为200,但response什么都没有只有一句灰色的英文

    问题解决了,图就下次遇到截图补上: 解决问题的方法,是让后台查看数据库是否锁库,或者更改什么配置文件例如.xml文件,还有就是ip错误:

  7. python技巧 显示对象的所有属性

    python技巧 显示对象的所有属性for attr in dir(ad):... print attr+":"+str(getattr(ad,attr))

  8. 初级JS

    唐太宗  李世民  杀了大哥 和弟弟  登上的皇位    一个人当皇帝 排他性是指一种物品具有可以阻止其他人使用该物品的特性. 排他性思想: 在程序中但凡是遇到只让自己怎么样,不让别人怎么样的效果,都 ...

  9. winform,listbox设置行高

    //必须要在写这个事件里写才有效果 private void listBox1_MeasureItem(object sender, MeasureItemEventArgs e) { e.ItemH ...

  10. ASP.NET 简介

    简介:ASP.NET - 制作网站应用程序的技术1.  WebForm 2.  MVC 什么东西? winform 界面 - 后台 - 数据库 共同组合出来的程序:ASP.NET 界面(HTML+CS ...