angularjs的表单验证
angularjs内置了常用的表单验证指令，比如min，require等。下面是演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body ng-app="app" ng-controller="ctrl" >
<style>
.valid-error{
color:red
}
</style>
<form name="form" novalidate>
<input type="text" ng-model="value0" required name="input0">
<span class="valid-error" ng-show="form.input0.$error.required">
值必须输入
</span>
<input type="number" ng-model="value1" min="0" name="input1">
<span class="valid-error" ng-show="form.input1.$error.min">
值必须大于等于0
</span>
</form>
</body>
<script src="bower_components/angular/angular.js">
</script>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',function($scope){
$scope.value0='1';
$scope.value1=0;
});
</script>
</html>
我们也可以自定义一个验证指令，比如验证电话号码的。
<input type="text" ng-model="phoneNum" name="phoneNum" phone>
<span class="valid-error" ng-show="form.phoneNum.$error.phone">
电话号码不合法
</span>
var PHONE_REGEXP = /(^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$/;
app.directive('phone', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$validators.phone = function (modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) {
// consider empty models to be valid
return true;
}
if (PHONE_REGEXP.test(viewValue)) {
// it is valid
return true;
}
// it is invalid
return false;
};
}
};
});
angularjs的表单验证的更多相关文章
- 基于angularJS的表单验证练习
今天看了一下angularJS的表单验证,看的有点云里雾里(也有可能是雾霾吸多了),于是做了一个小练习来巩固一下. html: <div ng-controller="Aaa" ...
- 【AngularJs】---表单验证
1. 必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2 ...
- angularJS 过滤器 表单验证
过滤器1.filter的作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果,主要用于数据的格式化.2.内置过滤器(1)Currency(货币)将一个数值格式化为货币格式,默认为$(2)D ...
- AngularJS 的表单验证
最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...
- AngularJS复习------表单验证
在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为 ...
- AngularJs实现表单验证
首先,我们应该知道,表单中,常用的验证操作有: $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine 表单没有填写记录 $error 表单 ...
- 夺命雷公狗—angularjs—3—表单验证的高级用法
其实我们的angularjs都是是块状代码,其实是可以在实际开发中保存下来以后就可以达到重复利用的目的了.. 废话不多说,直接上代码: <!doctype html> <html l ...
- AngularJS form表单验证（非常全面)
构建一个ng表单 novalidate=”novalidate” 2.form中不能有action属性.提交交由ng-submit处理 3.每个input一定要有ng-model,最好有一个name方 ...
- AngularJS的表单验证提交示例
代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsFormSubmit.rar 前台代码: <%@ page content ...
随机推荐
- C#_基础：委托速讲
1定义:委托=函数指针 C# public delegate void Test(string str); 等价C++ public void (*Test)(string str): 委托赋值(初始 ...
- 《.NET之美》消息及勘误
<.NET之美>消息及勘误 编辑最终还是采用了<.NET之美>作为书名,尽管我一直觉得这个名字有点文艺了,而更倾向于使用<.NET专题解析>这个名称. 目前已经可以 ...
- 10年微软MVP路（如何成为一个MVP？）
搞微软技术的,大家或多或少都有听说过微软的"最有价值专家"(MVP), 从2006年到2015年连续10年ASP.NET/IIS MVP.当年很多一起搞微软技术的朋友都转搞其他非微 ...
- 细数iOS上的那些安全防护
细数iOS上的那些安全防护 龙磊,黑雪,蒸米 @阿里巴巴移动安全 0x00 序 随着苹果对iOS系统多年的研发,iOS上的安全防护机制也是越来越多,越来越复杂.这对于刚接触iOS安全的研究人员来说非 ...
- ASP.NET MVC 防止 CSRF 的方法
MVC中的Html.AntiForgeryToken()是用来防止跨站请求伪造(CSRF:Cross-site request forgery)攻击的一个措施,它跟XSS(XSS又叫CSS:Cross ...
- Linux的tree命令
发现Linux下有个很好的命令,tree,能把目录以树的形式列出来,还支持很强大的参数. 但默认情况下是不带的,得自己去安装,先到这里下载它的代码:http://mama.indstate.edu/u ...
- nginx小记
上一次折腾nginx还是两年前的事情了.好多配置都忘记了. 捣腾了下阿里云,部署了一下,遇到几个小问题,温故并记录一下吧 :) 重新设置 nginx遇到问题:nginx: [error] invali ...
- [Unity][Heap sort]用Unity动态演示堆排序的过程(How Heap Sort Works)
[Unity][Heap sort]用Unity动态演示堆排序的过程 How Heap Sort Works 最近做了一个用Unity3D动态演示堆排序过程的程序. I've made this ap ...
- 先有 Mac 还是先有银元？
自从开设了这个公众号以后,收到最多的问题是:听了 Mac 君的介绍,我也觉得 Mac 很好,可是穷屌丝一枚,真买不起,怎么破?前几天我在微博上说,读了我的书,就有 Mac 了.居然有读者来问:这是真的 ...
- OracleConnection is obsolete
用EF搞Oracle的 fake CodeFirst 时,一直报错以下错误: 对类型“System.Data.OracleClient.OracleConnection”的存储区提供程序实例调用“ge ...