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上;

时间: 2024-12-26 18:09:07

AngulairJS表单输入验证与mvc的相关文章

使用文档对象在页面上创建学生信息表。 信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址, 信息表内容通过表单输入,提交前先使用正则表达式进行验证,联系地址不能超过20个字符, 每输入一名学生的信息,提交后,表格增加一行,表格不能被选择、复制。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <!--        描述:使用文档对象在页面上创建学生信息表.        信息表包括学号.姓名.性别.电子邮件.联系电话.个人主页和联系地址,        信息表内容通过表单输入,提交前先使用

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

本文首发于个人网站:Spring Boot构建的Web项目如何在服务端校验表单输入 这个例子用于演示在Spring Boot应用中如何验证Web 应用的输入,我们将会建立一个简单的Spring MVC应用,来读取用户输入并使用validation注解来检查,并且当用户输入错误时,应用需要再屏幕上显示错误信息提示用户重新输入. 首先构建Maven项目,该项目的pom文件内容如下: <?xml version="1.0" encoding="UTF-8"?>

PHP学习记录之表单的验证

1.表单的验证的小案例 HTML表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

HTML5表单及其验证

随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架,先说下表单的几个基本知识点: 表单仍是以<form>元素作为容器,我们可在其中设置基本的提交特性: 当用户提交页面时,表单仍然向服务器发送表单控件的值: 之前老版本中的表单控件,如text radio checkbox等等,都可以按

Validform和aui2.0结合使用的表单自定义验证提示和列表页异步获取数据Demo

二.添加自定义验证演示       Validform验证提示大多都是在输入框或下拉框的右边或下面.感觉就是不美观,特别是表单字段少的时候,这种在相应对象旁边的提示就没必要了,      它会给人一种不友好的感觉(只是自己的感觉).所以下面写了三种添加演示,希望大家能给出建议,以免下次用起来纠结,不知道用哪种好.        表单验证插件是我们经常使用的Validform_v5.3.2_min.js.先上添加1演示的表单验证js代码,这里我设置了点击提交按钮后才验证.其他添加演示的区别不大,详

jQuery表单提交验证

<!DOCTYPE html><html> <head> <title>表单提交验证功能</title> <meta charset="utf-8"/> <script src="scripts/jquery-1.11.3.js"></script> </head> <body> <fieldset> <legend>用户注

(基于织梦)表单提交验证

HTML页面内部写js代码,通过正则表达式验证: <!--表单正则表达式验证--><script>//创建验证函数check function check() { //获取表单中id为name的元素的value值 name=document.getElementById("name").value; //判断获取到的value值为空的时候,输出提示"请输入姓名",返回 if(name=="") { alert("

【jQuery】利用表单的序列化根据name取表单,做表单的验证

在前台做表单的验证的方式有很多种,具体思想是你先要把表单的要验证项里面的值取出来,然后再脚本处进行判断,最后根据判断结果告警,然后给onsubmit="return XX()"那个函数,返回true与false的布尔值.整个过程,把表单的要验证项取出来是关键.在<[JavaScript]表单即时验证,不成功不让提交>(点击打开链接)中利用了id取每一个表单项的属性,这是最基础的,但是如果需要以name的方法取出表单的项呢?此时,你可以利用jQuery的序列化,根据name来

Xceed WPF表单输入控件Xceed Editors for WPF 免费下载及介绍

Xceed Editors for WPF 是一款包含12种功能强大的WPF编辑控件,用户输入控件,每个控件都具有多种风格主题,包含:日期选择控件.复选框.改进的TextBox.数字输入框.值范围输入框等. 具体功能: DatePicker/Calendar:日期选择控件 MaskedTextBox:为输入文本指定一种标记格式 CheckBox:提供了多种风格的复选框,不像传统的WPF复选框 AutoSelectTextBox:当控件具有焦点时内容被选择 ValueRangeTextBox:添加