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 ...
随机推荐
- 在excel worksheet中添加button 和对Excel workbook做权限控制相关的新知识
添加button在worksheet中 1. Shapes Object (Excel) Reference:http://technet.microsoft.com/zh-cn/library/ff ...
- 一个防止误删MSSQL数据库的方法
一个防止误删MSSQL数据库的方法 环境:Windows2008 R2 .SQL 2012 今天发现一个有趣的现象,之前数据库服务器的其中几个数据库做过镜像,不过现在已经删除了,今天又要在那台服务器上 ...
- 突破瓶颈，对比学习：Eclipse开发环境与VS开发环境的调试对比
曾经看了不少Java和Android的相关知识,不过光看不练易失忆,所以,还是写点文字,除了加强下记忆,也证明我曾经学过~~~ 突破瓶颈,对比学习: 学习一门语言,开发环境很重,对于VS的方形线条开发 ...
- Scrum Guide - Scrum指南中文版
现在公司在使用敏捷开发模式进行日常的开发和管理工作,所以我看了下Ken Schwaber的<Scrum Guide>这本小册子,原本是英文的,这里提供中文的,以供日后复习和参考. Scru ...
- [ASP.NET MVC 大牛之路]03 - C#高级知识点概要(2) - 线程和并发
本人博客已转移至:http://www.exblr.com/liam 我也想过跳过C#高级知识点概要直接讲MVC,但经过前思后想,还是觉得有必要讲的.我希望通过自己的经验给大家一些指引,带着大家一起 ...
- Qt Disable QDebug And Warning Output
如何禁止qDebug的输出 在项目开发的过程中,为了开发方便,我们常常在Qt的Application Output中输出一些内容,慢慢的. 有些qDebug就会被我们遗忘再角落里. 虽然对整个程序影响 ...
- UITest 单元测试常用的断言
XCTFail(format…) 生成一个失败的测试: XCTFail(@"Fail"); XCTAssertNil(a1, format...) 为空判断, a1 为空时通过,反 ...
- Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析
这是关于RecyclerView的第二篇,说的是如何自定义Item动画,但是请注意,本文不包含动画的具体实现方法,只是告诉大家如何去自定义动画,如何去参考源代码. 我们知道,RecyclerView默 ...
- Atitit 图像处理知识点体系知识图谱 路线图attilax总结 v4 qcb.xlsx
Atitit 图像处理知识点体系知识图谱 路线图attilax总结 v4 qcb.xlsx 分类 图像处理知识点体系 v2 qb24.xlsx 分类 分类 理论知识 图像金字塔 常用底层操作 卷积扫描 ...
- Android Studio自动删除多余的import
在开发过程中,随着项目的迭代,文件内部分import 可能早已经不用了,对于这种无用的 import,我们不可能一个一个文件的删除.这里记录个自动删除无用import的功能. 一 .开发环境: And ...