最近开始着手学起了Angular,抱着好奇的心情开始研究了起来。忽然发现angular可以巧妙而方便的进行数据的绑定验证啊什么的。(当然,我只是刚开始学,所有可能有更强大的功能,只是我还没有看到)

那么先从我学习的数据绑定和数据验证开始说起吧

首先,肯定是引用

 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

然后它需要一个模板

   <form ng-app="myApp" name="myForm">
<div ng-controller="MyCtryTest">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr ng-repeat="x in pageData">
<td>{{ x.Name }}</td>
<td>{{ x.Age }}</td>
</tr>
</table>
</div>
输入你的名字:
<input name="myName" ng-model="myText" required>
Email:
<input type="email" name="myAddress" ng-model="myAddressText" required>
{{myForm.myAddress.$valid}} <input multiple-idcard name="user_idCard" ng-model="user.idCard" required class="form-control" placeholder="自定义验证" />
验证通过:{{myForm.user_idCard.$valid}}
</form>
ng,是angular规定的自己属性的一个前缀,form中的app就是相当于一个代码块,也可以理解为ID吧,反正我是这么理解的。
其实它特别像MVC,它也需要一个自己的controller,来定义一个div或者什么里面需要做的事情,大家可以看到我第二行的
ng-repeat,就是定义一个循环,x in pageData,这里是不是很像foreach?x是定义的变量名, in 是数据从哪里来,
pageData就是我们的数据,那么大家肯定会问,pageData是哪里来的?大家看下面的js,在第七行中,我把response中返回的Data给了pageData,也就是说,我循环的就是从服务端取得的
数据,下面就是实例中的js,我做了一个简单的封装。
然后至于验证,像email啊,number啊,这个在angular中都有,你只要在input中,type="email"或"number"就好了,如果是非空的话,直接加一个required就好,则重需要注意的就是
{{myForm.myAddress.$valid}},这个中的myForm,指的就是你form中给的name,myAddress是input中的name,那么,$valid就是返回一个验证是否通过,true或false,主要需要
关心的,是我们的自定义验证,在整个 appData.directive 中都是为了实现自定义验证,那么,这个js和input是怎么关联起来的呢?
大家可以看一下,在input中,有一个自定义属性,multiple-idcard,那么,在我封装的js方法中的最后一个参数multipleIdcard,他们两个是不是相同的呢?那么,我们要注意的是,在
我们input中的自定义属性,中间要有一个-,在js中,-后面的首字母要大写,这样他们两就能匹配起来了。
是不是很简单?学习了下,我还是蛮喜欢angular的。
 window.onload = bindRep("myApp", "MyCtryTest", "/Data/repData.ashx", "/^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{4}$/", "multipleIdcard");

     function bindRep(app, controller, url, validation, bind) {
var appData = angular.module(app, []);
appData.controller(controller, function ($scope, $http) {
$http.get(url)
.success(function (response) { $scope.pageData = response.Data; });
});
appData.directive(bind, [
function () {
return {
require: "ngModel",
link: function (scope, element, attr, ngModel) {
if (ngModel) {
var idCardsRegexp = eval(validation);
console.log(idCardsRegexp);
}
debugger;
var customValidator = function (value) {
var validity = ngModel.$isEmpty(value) || idCardsRegexp.test(value);
ngModel.$setValidity(bind, validity);
return validity ? value : undefined;
};
ngModel.$formatters.push(customValidator);
ngModel.$parsers.push(customValidator);
}
};
}
]);
}

这是我从服务端返回的数据

 StringBuilder sbuJson = new StringBuilder();
sbuJson.AppendLine("{\"Data\":[");
sbuJson.AppendLine("{\"Name\":\"zhangsan\",\"Age\":\"18\"},");
sbuJson.AppendLine("{\"Name\":\"lisi\",\"Age\":\"19\"},");
sbuJson.AppendLine("{\"Name\":\"wangwu\",\"Age\":\"20\"},");
sbuJson.AppendLine("{\"Name\":\"zhaoliu\",\"Age\":\"21\"},");
sbuJson.AppendLine("{\"Name\":\"hehe\",\"Age\":\"22\"},");
sbuJson.AppendLine("{\"Name\":\"haha\",\"Age\":\"23\"},");
sbuJson.AppendLine("{\"Name\":\"heihei\",\"Age\":\"24\"},");
sbuJson.AppendLine("{\"Name\":\"gaga\",\"Age\":\"25\"},");
sbuJson.AppendLine("{\"Name\":\"xixi\",\"Age\":\"26\"}");
sbuJson.AppendLine("]}");
context.Response.Write(sbuJson.ToString());
context.Response.End();

这是我的style

 <style>
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
} table tr:nth-child(odd) {
background-color: #f1f1f1;
} table tr:nth-child(even) {
background-color: #ffffff;
} input.ng-invalid {
background-color: lightblue;
}
</style>

关于AngularJs,数据绑定与自定义验证的更多相关文章

  1. angularJS中的表单验证(包括自定义验证)

    表单验证是angularJS一项重要的功能,能保证我们的web应用不会被恶意或错误的输入破坏.Angular表单验证提供了很多表单验证指令,并且能将html5表单验证功能同他自己的验证指令结合起来使用 ...

  2. 【AngularJS中的自定义服务service VS factory VS provider】---它们的区别,你知道么?

    在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~ 学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了. 而 ...

  3. 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理汇总.如果对文中的题目全部了然于胸,觉得对整个angular框架应该掌握的七七八八了.希望志同道合的通知补充 ...

  4. AngularJS 表单数据验证及错误信息提示

    一.表单验证基本原理 表单验证包括两个主题: 定义验证规则,验证数据有效性. 显示验证结果,把验证结果以友好的方式显示给用户. H5内置一些验证功能,并会显示内置的错误提示信息,先要禁用它,在< ...

  5. AngularJS入门之数据验证

    AngularJS自带了对表单或控件的输入数据进行验证的功能,对于Html5的基础控件均有内建的验证器,以下列举了所有支持的验证类型: email max maxlength min minlengt ...

  6. Angular11 模板表单、响应式表单(自定义验证器)、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  7. 9、 Struts2验证(声明式验证、自定义验证器)

    1. 什么是Struts2 验证器 一个健壮的 web 应用程序必须确保用户输入是合法.有效的. Struts2 的输入验证 基于 XWork Validation Framework 的声明式验证: ...

  8. 重写ValidateEntity虚方法实现可控的上下文验证和自定义验证

    上篇文章介绍了ValidationAttribute和IValidatableObject.Validate验证,但是这种验证还是稍微简单了,对于复杂的实体,例如:继承过来的实体.实现某接口的实体等等 ...

  9. jq.validate 自定义验证两个日期

    jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...

随机推荐

  1. vi(Visual Editor)常用的命令

    任何用户最常做的事要数创建和编辑文件,包括文档.报告和文字,vi(Visual Editor)是一个有效而相对简单的全荧幕编辑,使用vi,只要记著少量基本指令,就可以开始起步,再学习其他更复 杂的指令 ...

  2. 视觉机器学习------K-means算法

    K-means(K均值)是基于数据划分的无监督聚类算法. 一.基本原理       聚类算法可以理解为无监督的分类方法,即样本集预先不知所属类别或标签,需要根据样本之间的距离或相似程度自动进行分类.聚 ...

  3. 学习笔记---C/C++语法

    一.char *s char s[] 区别 char *s中的s是指针,而指针是指向一块内存区域,它指向的内存区域的大小可以随时改变,而且当指针指向常量字符串时,它的内容是不可以被修改的,否则在运行时 ...

  4. mac终端显示和隐藏隐藏文件的命令

    defaults write com.apple.finder AppleShowAllFiles -bool true; killall Finder //显示隐藏文件 defaults write ...

  5. Java语言程序设计(基础篇) 第七章 一维数组

    第七章 一维数组 7.2 数组的基础知识 1.一旦数组被创建,它的大小是固定的.使用一个数组引用变量,通过下标来访问数组中的元素. 2.数组是用来存储数据的集合,但是,通常我们会发现把数组看作一个存储 ...

  6. NSArray

    版权声明:本文为博主原创文章,未经博主允许不得转载. 数组是一个元素有序.元素可重复的集合,在iOS编程中经常被用到,而Foundation框架提供了数组对象.数组对象包括不可修改的数组对象NSArr ...

  7. 简介 jCanvas:当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

  8. JavaNote01_变量 基本数据类型

    >主要内容: 变量的初始化.赋值.读写操作 8中基本数据类型(取值范围).整数的直接量(字面量)是哪种类型.浮点数的字面量是哪种类型 >变量 >>声明变量:开启一个存储单元,用 ...

  9. Python之路----------基础 一(数据类型、变量、基本语法、流程控制)

    一. 数据类型与变量 1.数据类型 整数   #Python在程序中的表示方法和数学上的写法一模一样,-1,0,1都是整数. 浮点数  1 #浮点数就是小数. 字符串 1 #在Python中字符串是以 ...

  10. LUA学习笔记三·时间等操作系统库

    1.构造时间 2.时间制定格式输出 3.计时器(闭包)os.difftime (t2, t1) 返回以秒计算的时刻 t1 到 t2 的差值. (这里的时刻是由 os.time 返回的值). 在 POS ...