Angular 学习笔记——表单验证
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/angular-1.3.0.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('may',['$scope',function($scope){
$scope.regText = {
regVal:'default',
regList : [
{name:'default',tips:'请输入用户名'},
{name:'required',tips:'用户名不能为空'},
{name:'pattern',tips:'用户名必须是字母类型'},
{name:'pass',tips:'√'}
]
}; $scope.regPassword = {
regVal:'default',
regList : [
{name:'default',tips:'请输入密码'},
{name:'required',tips:'密码不能为空'},
{name:'minlength',tips:'密码大于六位'},
{name:'pass',tips:'√'}
] };
$scope.change = function (reg,err){
for(var attr in err){
if(err[attr] == true){
$scope[reg].regVal = attr;
return
}
}
$scope[reg].regVal = 'pass';
} }])
</script>
</head>
<body>
<div ng-controller='may'>
<form novalidate name="myform">
<div>
<label>用户名:</label>
<input type="text" name="nusername" ng-model='regText.name' required ng-pattern='/^[a-zA-Z]+$/' ng-blur="change('regText',myform.nusername.$error)">
<span ng-repeat='re in regText.regList | filter:regText.regVal'>{{re.tips}}</span>
</div> <div>
<label>密码:</label>
<input type="password" name="nPassword" ng-model='regPassword.name' required ng-minlength='6' ng-blur="change('regPassword',myform.nPassword.$error)">
<span ng-repeat='re in regPassword.regList | filter:regPassword.regVal'>{{re.tips}}</span>
</div>
</form>
</div>
</body>
</html>
Angular 学习笔记——表单验证的更多相关文章
- angular中的表单验证
angular中的表单验证很强大, 一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error. $valid-----当验证通过的时候,为true,不通过的时 ...
- 学习W3SCHOOL 表单验证
//表单学习笔记 //建立一张表单的验证 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...
- [jQuery学习系列五 ]5-Jquery学习五-表单验证
前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...
- php学习笔记——表单
13.表单 1)GET vs. POST GET 和 POST 都创建数组(例如,array( key => value, key2 => value2, key3 => value ...
- AngularJs学习笔记-表单处理
表单处理 (1)Angular表单API 1.模板式表单,需引入FormsModule 2.响应式表单,需引入ReactiveFormsModule (2)模板式表单 在Angular中使用for ...
- 吴裕雄--天生自然 PHP开发学习:表单 - 验证邮件和URL
$name = test_input($_POST["name"]); if (!preg_match("/^[a-zA-Z ]*$/",$name)) { $ ...
- 吴裕雄--天生自然 PHP开发学习:表单验证
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- ZendFramework2学习笔记 表单过滤、表单验证
ZF2有非常多内建的Filter和Validator组件,能够方便地对表单数据进行处理. Filter的作用是过滤表单数据.比如,去除一些空格,替换一些敏感词等. Validator的作用是检验表单数 ...
- SpringMVC学习系列- 表单验证
本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...
随机推荐
- 洛谷P3144 [USACO16OPEN]关闭农场Closing the Farm
农夫约翰和他的奶牛准备去旅行,所以约翰想要把他的农场临时关闭. 农场有N个牛棚(牛棚从1到N编号),有M条路连接这些牛棚(1≤N,M≤3000). 约翰打算挨个关闭牛棚,在关牛棚的时候, 他突然想起一 ...
- VC++中有关句柄和指针及其转换(转)
原文转自 https://blog.csdn.net/jearmy/article/details/47030011 1.MFC窗口的句柄和指针的转换 (1) 一般窗口对象都会有一个其对应的句柄变量, ...
- V4L2驱动的移植与应用(二+三)【转】
转自:http://blog.chinaunix.net/uid-10747583-id-298489.html 原文地址:http://blog.csdn.net/wxzking/archive/2 ...
- 为什么js引入页面后不起作用?
为什么js引入页面后不起作用? 例如常见的报错:Uncaught ReferenceError: $ is not defined. 可能出现这种情况的原因如下: 原因一: 引入js的位置不对,应在使 ...
- Linux单机安转Spark
安装Spark需要先安装jdk及安装Scala. 1. 创建目录 > mkdir /opt/spark > cd /opt/spark 2. 解压缩.创建软连接 > tar z ...
- Scala学习随笔——控制语句
Scala只内置了为数不多的几种程序控制语句:if.while.for.try catch以及函数调用,这是因为从Scala诞生开始就包含了函数字面量,Scala内核没有定义过多的控制结构,而是可以通 ...
- 1.Openstack-环境安装
Centos7 OpenStack环境安装 Ifcofnig vim命令 Centos7最小化安装后如没有ifconfig vim命令,执行: 1 yum install -y net-tools v ...
- 关于boostrapValidator动态添加字段(addField)验证的bug
每次码博客,都觉得自己怀才不遇,哎~脑袋有瑕疵,文笔拿不粗手,就直接上干货吧. 在使用boostrapValidator这个验证插件的时候,如果某一个字段是动态添加来的,我们需要调用方法:addFie ...
- 利用ICSharpCode进行压缩和解压缩
说说我利用ICSharpCode进行压缩和解压缩的一些自己的一下实践过程 1:组件下载地址 参考文章:C#使用ICSharpCode.SharpZipLib.dll压缩文件夹和文件 2: 文件类 // ...
- 01背包【p1060】开心的金明
Description 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:"你的房间需要购买哪些物品,怎么布置,你说了算,只要 ...