最近开始着手学起了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. 过滤关键字防止XSS攻击

    public static string ClearXSS(string str) { string returnValue = str; if (string.IsNullOrEmpty(retur ...

  2. vert.x学习(六),动态模板与静态文件的结合

    这篇学习在动态模板里面引入css,把动态模板与静态文件结合起来使用. 编写DynamicReference.java package com.javafm.vertx.helloworld; impo ...

  3. sprintf数据库查询的作用

    $sql = sprintf("UPDATE file SET mimetype=null,title=null,size=null,protected=null WHERE id=%d&q ...

  4. PMP--综合考试知识点,持续更新中。。。

    1]盈亏平衡点=固定成本/(销售价格-可变成本). 2]项目管理(Project Management): 就是把各种知识.技能.手段和技术应用于项目活动之中,以达到项目的要求. 3]有效的管理要求项 ...

  5. 【leedcode】longest-substring-without-repeating-characters

    Given a string, find the length of the longest substring without repeating characters. Examples: Giv ...

  6. DevExpress XtraPivotGrid 交叉表 重复显示问题

    转自:http://www.cnblogs.com/xiayan/archive/2011/11/04/2236389.html 最近发现xtrareport 的PivotGrid实现交叉表非常的简单 ...

  7. C++学习笔记 封装 继承 多态 重写 重载 重定义

    C++ 三大特性 封装,继承,多态 封装 定义:封装就是将抽象得到的数据和行为相结合,形成一个有机的整体,也就是将数据与操作数据的源代码进行有机的结合,形成类,其中数据和函数都是类的成员,目的在于将对 ...

  8. Redis集群~StackExchange.redis连接Twemproxy代理服务器

    回到目录 本文是Redis集群系列的一篇文章,主要介绍使用StackExchange.Redis进行Twemproxy(文中简称TW)代理服务的连接过程,事务上,对于TW来说,我们需要理解一下它的物理 ...

  9. SP2-0618: 无法找到会话标识符。启用检查 PLUSTRACE 角色 SP2-0611: 启用 STATISTICS 报告时出错

    援引: SP2-0618: 无法找到会话标识符.启用检查 PLUSTRACE 角色 SP2-0611: 启用 STATISTICS 报告时出错 问题描述及解决方法: SQL*Plus: Release ...

  10. jdbc 数据库连接

    连接数据库 1)通过Driver来连接(Driver:数据库厂商提供的一个接口) public void testDriver()throws Exception{ Driver driver = n ...